1 布局

（1）container类
能够实现响应式

（2）contain-fluid类
宽度始终为100%

2 栅格系统

（1）col-xs-1：手机

（2）col-sm-1：平板

（3）col-md-1：PC

列偏移：col-md-offset-1

3 无样式列表

（1）list-unstyled：去掉ul默认样式

（2）list-inline：将ul子元素放于同一行

4 表格类

给table添加的类：

（1）table：表格基础类

（2）table-striped：隔行变色

（3）table-hover：鼠标悬停效果

（4）table-condensed：缩小内边距为原来的一半

（5）table-bordered：使表格有边框

给tr或td添加的类：

（1）.activate：鼠标悬停在行或单元格上时所设置的颜色

（2）.success：标识成功或积极的动作

（3）.info：表示普通的提示信息或动作

（4）.warning：标识警告或需要用户注意

（5）.danger：表示危险或潜在的带来负面影响的动作

响应式表格：

table-responsive：当屏幕尺寸小于768时，可以在表格下面出现滚动条

5 按钮

设置类即可
（1）btn类：按钮的样式

（2）btn-default类：悬停效果

（3）btn-primary：首选项效果

（4）btn-success：成功效果

（5）btn-info：一般信息效果

（6）btn-warning：警告效果

（7）btn-danger：危险效果

设置尺寸
（1）btn-lg：变大

（2）btn-sm：变小

（3）btn-xs

将按钮变为块元素：btn-block

设置按钮被激活时的状态：active

6 图片

（1） img-round：圆角效果

（2）img-circle：圆形

（3）img-thumbnail：边框

（4）img-responsive：图片变为响应式

7 三角符号

caret类

8 快速浮动

（1）pull-left

（2）pull-right

9 内容块居中

center-block

10 响应式工具

（1）visible-xs/sm/md/lg:在不同的设备上显示

（2）hiddem-xs/sm/md/lg:仅此大小隐藏

Bootstrap的CSS样式相关推荐

bootstrap课程4 bootstrap的css样式有哪些内容需要注意
bootstrap课程4 bootstrap的css样式有哪些内容需要注意一.总结一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...
bootstrap全局css样式
一.富文本编辑器富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于比如谷歌.火狐效果都非常不错, 在功能的丰富性来说,还是IE强些(但 ...
Bootstrap全局css样式_按钮
链接被作为按钮使用时的注意事项如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role ...
Bootstrap全局css样式_表格
条纹状表格通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式.<!DOCTYPE html> <html lang=" ...
Bootstrap全局css样式_代码
内联代码通过 <code> 标签包裹内联样式的代码片段.<!DOCTYPE html> <html lang="en"> <head&g ...
Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...
修改bootstrap 中 CSS 样式表，以实现自己需要的部分样式。
bootstrap当中,已经自动配置好许多CSS 样式,但是,咱们可以根据自己的需要来修改相应的部分内容,实现自己想要的结果. 目前,尼玛哥在web前端开发的过程当中, 使用到了bootstrap框架 ...
Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
Bootstrap全局css样式的使用
教程目录 0x00 教程内容 0x01 准备环境 1. 新建HTML文件 2. 用浏览器打开 0x02 Bootstrap全局样式的使用 1. 引入Bootstrap样式资源 2. 修改css样式 3 ...
Bootstrap全局css样式_辅助类
情境文本颜色通过颜色来展示意图,Bootstrap 提供了一组工具类.这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样.<!DOCTYPE html> < ...

Bootstrap的CSS样式