Bootstarp全局样式

Bootstrap提供了大量的全局样式,基本的HTML元素均可以通过class设置样式并得到增强效果。

1.文本类

.text-left 内容左置

.text-center 内容居中

.text-right 内容右置

.text-lowercase 内容变成小写

.text-uppercase 内容变成大写

.text- capitalize 内容首字母变大写

.h1~.h6类名能为内联元素赋予标题的样式

2.图片类

.img-rounded 圆边角

.img-circle 圆形(或椭圆)

.img-thumbnail 带有边框的圆角图形

3.按钮类

.btn Bootstrap 基础按钮

.btn-default 默认按钮

.btn-primary 主要按钮

.btn-warning 警告按钮 orange

.btn-info 信息按钮

.btn-success 成功按钮 green

.btn-danger 报错按钮 red

.btn-link 链接按钮

.btn-lg 大按钮

.btn-sm 小按钮

.active 默认选中

.btn-block 全屏按钮

.disabled 禁止按钮

4.表格类

< table class=""></ table>
.table 基础表格效果

.table-striped 斑马线效果

.table-bordered 边框效果

.table-hover 高亮效果(鼠标经过的变色效果)

< tr class=""></ tr>
表格颜色:
.danger
.warping
.info
.success
.active

5.表单控件类

< form class=".form-inline" ></ form > 表单元素一行显示

< div class=""></ div>
.form-group 将label和input(或其他)组合成一个组件

.has-success 代表状态

.has-warning 代表状态

.has-error 代表状态

< input class="" />
.form-cotrol 圆角方框发光

.input-lg 输入框变大

.input-sm 输入框变小

< label class=""></ label>
.sr-only 标签消失

.control-label 可更改相关样式

发布了13 篇原创文章 · 获赞 2 · 访问量 5377

猜你喜欢

转载自blog.csdn.net/weixin_44212397/article/details/104023181
今日推荐