首页 > 编程札记 > 编程

bootstrap中常用标签类名整理

阅读：评论：0

bootstrap中常用标签类名整理

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 元素隐藏[移动端]
.llapse 在pc 端【强制】显示
.navbar-nav 表示导航条下导航
.navbar-form 表示导航条中输入框
.navbar-left 让导航在导航条中左浮动【移动端无浮动】
.navbar-right 让导航有又浮动【移动端无浮动效果】
.navbar-toggle 表示显示隐藏列表导航栏，有【右浮动】效果

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

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