您的位置：首页 > Web前端 > BootStrap

bootstrap常用类

2019-08-06 17:16 881 查看

bootstrap常用类

一．文本
1）对齐方式
text-left 文本左对齐 =======> text-align：left
text-center 文本居中对齐
text-right 文本右对齐
text-justify 文本两端对齐
text-nowrap 不换行
text-lowercase 小写
text-uppercase 大写
text-capitalize 首字母大写

2）文本颜色
text-muted 灰色
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红

3）背景颜色
bg-muted 灰色
bg-primary 主要蓝
bg-success 成功绿
bg-info 信息蓝
bg-warning 警告黄
bg-danger 危险红

二．页面排版
1）列表排版
ul的类
list-unstyled 移除默认样式
list-inline 设置成内联

dl类
dl-horizontal 水平排列描述列表定义列表

2）table表格
table 基本的表格样式
table-striped 条纹状表格（前提必须现有table类）
table-bordered 给表格增加边框（前提必须现有table类）
table-hover 让下的表格悬停鼠标实现背景效果（前提必须现有table类）

可以给tr加上以下任意一种类实现每一行的颜色不一样

状态类样式说明 active 鼠标悬停在行或单元格上 success 标识成功或积极的动作 info 标识普通的提示信息或动作 warning 标识警告或需要用户注意 danger 表示危险或潜在的带来负面影响的动作隐藏行

3）form表单
内联表单
form类
form-inline 让表单左对齐浮动

水平排列
form类
form-horizontal 让表单内的元素保持水平排列

form-group 表单成组显示成组里的表单也可以用栅格系统
form-control 可以给表单里的任何标签加

电子邮件

表单合组
input-group input-group-addon
前后增加片段

￥ .00

disabled 禁用

表单校验状态

样式说明
has-error 错误状态
has-success 成功状态
has-warning 警告状态

可以在表单后加上校验状态小图标例如：校验成功后面显示一个对勾
form-control-feedback

电子邮件

span的类
样式说明
glyphicon-ok 成功状态
glyphicon-warning-sign 警告状态
glyphicon-remove 错误状态

Input的大小可以通过类来控制
input-lg 大的input
Input-sm 小的input
也可以设置父元素 form-group-lg、form-group-sm来调整

4）图片
img-rounded 方形
img-circle 圆形（图片长宽不等时是椭圆形）
img-thumbnail 有边框
img-responsive 响应式图片

5）按钮/超链接
button/a
样式说明
btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选项样式
btn-link 链接样式

btn-block 块级按钮
active 激活按钮

按钮大小
btn-lg 大按钮
btn-md 适中按钮
btn-sm 小按钮
btn-xs 超小按钮

多个按钮可以成组
把按钮用一个div包着 div类为btn-group

左中右

按钮组大小
btn-group-lg
btn-group-md
btn-group-sm
btn-group-xs

按钮组垂直排列
btn-group-vertical
按钮组两端对齐
btn-group-justified

关闭按钮
×

块居中
center-block ========>margin:0 auto

clearfix 清理浮动

三．栅格系统
container
超小屏幕手机 (<768px) xs 100% col-xs-数字(份数)
小屏幕平板 (≥768px) sm 750px col-sm-数字
中等屏幕桌面显示器 (≥992px) md 970px col-md-数字
大屏幕大桌面显示器 (≥1200px） lg 1170px col-lg-数字
一行最多可以12份

Container-fluid 100%

如果不指定手机上每一列占一行
列偏移
col-md-offset-2
向右推
col-md-push-2
向左拉
col-md-pull-2

如果指定了 md 没有指定 lg
那么在lg的屏幕下就会用 md指定的列宽百分比

如果指定了 lg 没有指定 md
那么在 md下面每个列宽度是100%

左浮动
pull-left ===> float:left!important
右浮动
pull-right

响应式工具
hidden-xs 在超小屏幕隐藏其他屏幕可见
hidden-sm 在小屏幕隐藏其他屏幕可见
hidden-md 在中屏幕隐藏其他屏幕可见
hidden-lg 在大屏幕隐藏其他屏幕可见

visible-xs 在超小屏幕显示其他屏幕隐藏
visible-sm 在小屏幕可见其他屏幕隐藏
visible-md 在小屏幕可见其他屏幕隐藏
visible-lg 在小屏幕可见其他屏幕隐藏

四．组件
1）导航组件：
1基本导航

2胶囊式导航

3垂直胶囊式导航

4面包屑导航

首页
产品列表
韩版 2015 年羊绒毛衣

5带下拉菜单的导航

首页
资讯
下拉菜单 [li]菜单一
菜单二

[/li]

2）分页组件：
1默认分页

2翻页效果

3对齐翻页链接

3）徽章
未读信息数量徽章
信息 10

设置尺寸，四种 lg、默认、sm 和 xs

4）下拉菜单
1基本格式

下拉菜单

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置 data-toggle="dropdown"才能 3ff8 有效。对于菜单部分，设置 class="dropdown-menu"才能自动隐藏并添加固定样式。设置 class="caret"表示箭头，可上可下。 //设置向上触发 //菜单项居右对齐，默认值是 dropdown-menu-left

2按钮式下拉菜单

下拉菜单

3分裂式按钮下拉菜单

下拉菜单

向上弹出式

5）警告框组件
1基本警告框

Bootstrap Bootstrap Bootstrap Bootstrap

2带关闭的警告框

Bootstrap ×

自动适配的超链接

Bootstrap，请到官网下载

6）巨幕组件
巨幕组件主要是展示网站的关键性区域。
jumbotron
在固定的范围内，有圆角

网站标题

这是一个学习性的网站！

网站标题

这是一个学习性的网站！

标题

企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

媒体对象在右边

标题

五．插件

1）滚动监听

// mynav 就要监听的元素

bootstrap 会自动个当前 li加上一个active 的class

可以根据active 设置不同的样式

2）弹出框
打开

弹出标题 × 弹出内容

</div>

3）轮播图

            <a href="#banner" data-slide="prev" class="left carousel-control">上一张</a>
<a href="#banner" data-slide="next" class="right carousel-control">下一张</a>

</div>

注意事项：
1,不要记下class样式名
2，不用bootstrap解决所有的问题（还是自己要写部分css）
3，如果是不规则的网站不要使用bootstrap
4，不要尝试同时解决手机端和电脑端两个网页（熟了后可以）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航