bootstrap中常用标签类名整理

傷城~ 2023-05-30 15:52 152阅读 0赞

# lqUI 全局样式说明文档 #

下面是一些bootstrap中常用的标签类名

## 清空默认样式 ##

## 布局 ##

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

## 按钮 -btn ##

成功 btn-success  
失败 btn-fail  
警告 btn-warning  
错误 btn-error  
取消 btn-cancel  
确认 btn-sure  
默认 btn-default  
危险 bnt-danger  
首选 btn-primany  
一般信息 btn-info  
禁止按钮 btn-disable  
百搭按钮 btn-normal  
暖色按钮 btn-warm

### 渐变色的按钮样式 ###

成功 btn-success-rgb  
失败 btn-fail-rgb  
警告 btn-warning-rgb  
错误 btn-error-rgb  
取消 btn-cancel-rgb  
确认 btn-sure-rgb  
默认 btn-default-rgb  
危险 bnt-danger-rgb  
首选 btn-primany-rgb  
一般信息 btn-info-rgb  
禁止按钮 btn-disable-rgb  
百搭按钮 btn-normal-rgb  
暖色按钮 btn-warm-rgb

### 伪类按钮样式 ###

\-型号  
大 btn-bg  
小 btn-sm  
中 btn-xs

圆角按钮 btn-radius

## 表单 ##

## 滑块 ##

## selec选择框 ##

## 表格 .lq-table ##

.table 表示基础表格；必须在table标签中使用；表示只有列边框的表格  
.table-striped 表示条状表格；表体的偶数行；有一定的背景颜色  
.table-column 表示半边框样式  
.table-hover 表示悬浮表格  
.table-condensed 紧缩表格  
.table-border 边框表格  
.table-inverse 背景色为黑色的表格  
.table-inverse-strped 黑色条形表格  
.table-inverse-hover 黑色悬浮样式 需要依赖 .table-inverse 或者 .table-inverse-striped  
.table-control 表示控制列固定 其他列可以滚动 .table-control 必须给table标签的祖籍元素添加 而不是给父元素添加  
.table-box 表示table的父容器

.table-control{ 
       position:relative;
    }
    .table-control table>tr>td:last-child{ 
       position:absolute;
       right:0;
       min-width:120px;
       text-align:center;
       box-shadow:-5px 4px 6px 1px #ccc;
    
    }
    /* 选中倒数第二列 解决内容遮罩问题 */
    .table-contrl table>tr>td:last-of-child(2):before{ 
           content:"";
           width:120px;
           
    }
    .table-control>.table-box{ 
        overflow:auto;
    }

.table-responsive 移动端表格 可以有横向滚动的效果 .table-responsive 需要给table 的父容器添加

状态表格; 给tr 添加类名  
.success 成功  
.waring 警告  
.danger 危险  
.primary 首选  
.warm 暖色

## 栅格系统 ##

### 分页 .Page ###

.pagination 实现分页样式 有 ul li a 完成分页效果  
.pagination-bgc 表示带有背景颜色的分页  
.pagination-noBgc 表示没用背景色的分页  
.pagination-inverse 黑色的分页

### 表单类 ###

### 单选或多选框样式 ###

.circle-check 圆形选择框 .circle-check 需要给input\[type=checkbox\]的父元素添加  
.square-check 正方形选择框 .square-check 需要给input\[type=checkbox\]的父元素添加

html

## 滑块 .sliderbar ##

.sliderbar-box 表示进度条外围容器  
.sliderbar 表示滑块的条  
.sliderbar-control 表示控制键

<div class="sliderbar">
            <div class="sliderbar-control"></div>
        </div>
        
    
    状态
    .sliderbar-success
    .sliderbar-info
    .sliderbar-primary
    .sliderbar-error

### 开关 .switch ###

.switch 开关样式的选择框 需要给 input\[type=checkbox class=switch\] 才能实现效果  
\- 绿色为开 input=checked 灰色为关 input=disable  
状态  
.switch-info 蓝色开 灰色关  
.switch-danger 红色开 灰色关  
.switch-warm 橙色开 灰色关  
.switch-primary 蓝色开 红色关

### 步骤条 step ###

.step-wrap 为 外部容器 55rem  
.step-full 每个步骤的容器 包含内容 ：圆 线 文本  
.step 具体进行的每一步 input\[type=checkbox\] 实现 当有checked属性的适合 表示当前步骤已经完成  
.step-circle 表示圈  
.step-line 表示线  
.step-text 表示步骤内容

状态  
.step-circle-info  
.step-circle-success  
.step-circle-primary  
.step-circle-warm  
.step-circle-error  
.step-circle-danger

### 导航 .nav ###

注意： 导航仅仅使用于pc 端 应用 且只使用于静态的样式。 导航中所  
有的样式都是操作li下的a标签  
.nav-tab 表示tab样式的导航条 需要依赖.nav  
.nav-pills 胶囊式的导航 需要依赖.nav  
.nav-stacked 侧边导航栏 需要依赖.nav

.nav-inverse 表示背景色为黑色的导航  
.nav-aside 表示侧边栏导航  
.nav-fixed-top 表示固定导航 在顶部  
.nav-fixed-left 表示屏幕左边固定导航  
.nav-fixed-right 表示屏幕右边固定导航

### 导航条 .navbar ###

注意： 导航条兼容移动端 \#\#\# 导航条 .navbar

兼容移动端样式设置规则：媒体查询最小宽度；写pc端样式；当小于这个宽度时候；使用浏览器默认样式  
网站的导航条；到移动端时候可以折叠

.navbar 导航条 兼容pc 移动 默认样式为隐藏状态  
.navbar-default 给导航条添加样式 背景色  
.navbar-header 有媒体查询样式；做PC 端和移动端区分； 移动端宽度100%  
.collapse 元素隐藏\[移动端\]  
.nav-collapse.collapse 在pc 端【强制】显示  
.navbar-nav 表示导航条下导航  
.navbar-form 表示导航条中输入框  
.navbar-left 让导航在导航条中左浮动【移动端无浮动】  
.navbar-right 让导航有又浮动【移动端无浮动效果】  
.navbar-toggle 表示显示隐藏列表导航栏，有【右浮动】效果

.navbar-fixed-top 固定顶部导航条  
.navbar-inverse 黑色导航条 border-bottom:1px solid black  
.navbar .active 背景颜色黑色 字体白色

.breadcrumb 表示路径导航；没有基础类

*  每个a 添加伪元素； content:“Z/\\00a0”

## 规范 ##

1.清空所有html标签默认样式

2.字体：标准 14px 最大 36px 最小 12px

3.布局： 栅格系统：给一个父容器等分多少份  
12列;  
每个子元素可以占12列中 1-12 最大为12份  
col-12 占据12份

### 开发浏览器注意事项 ###

1.  如果您是ie 7 8 浏览器 请您更换浏览器
2.  ie7 尽量全部使用div 例如  
    ul div.ul  
    li div.li  
    span div.span 设置display：inline
3.  ie 78 不支持浮动 清除浮动 css3 百分之90属性