bootstrap 全局css样式

此总结基本参照官网


几个小知识

  • .container 布局容器,就是网页外边最大的那个容器,所有东西放在他里边,居中显示
  • .container-fluid 让页面占满整个视口
  • 必须使用HTML5的文档声明方式
  • JS插件必须依赖jQuery

栅格系统
将页面宽度平均分成12竖条,利用这12块进行布局
bootstrap的内边距总是15px

.col-lg-num 代表一个元素占领了几个栅栏
.col-md-    最经常使用的,应该以1024为界限
.col-sm-    小的,也不大推荐
.col-xs-    微小,不推荐

排版:即使没有排版问题,bootstrap也将h1,p标签等的原本样式进行了更改

.h1-.h6给内联属性的文本赋予标题的样式,用.small或者来为标题添加副标题
.page-header可以设置好看的头部信息,字体样式改变,且下面有一个下划线,用在标题上
.lead 让段落突出,着重强调,表现为字体加大且有点加粗
高亮显示,表现为背景颜色变化
删除,无用的文本,效果和是相同的
带下划线的文本,额外插入的文本,两者效果相同
.small或者设置小号字体
强调文本,强调文本
斜体,斜体
文字的对其方式们
    .text-left  文字左对齐
    .text-center 文字居中
    .text-right 文字右对齐
    .text-justify 两端对齐,如果最后少一个字符,也可以保证两边 是对齐的
    .text-nowrap
    .text-lowercase 全小写
    .text-uppercase 全大写
    .text-capitalize首字母大写
在JavaScript的字符串中也有tolowercase和touppercase属性来设置大小写

列表

ul>li 无序列表
ol>li 有序列表
.list-unstyled 去掉了前边的小圆点
.list-inline 将li里的内容放置在一行里,设置成类似导航的效果
dl>dt+dd 带有描述的短语列表
.dl-horizontal是将描述内容放在一行上,horizontal是水平线的意思
.text-overflow 自动截断,水平排列的描述列表会截断左侧太长的短语,在很窄的视口中,列表将变为默认堆叠排列的布局方式
dl : define list
dt : 标题
dd : 选项

代码

 包裹内联样式的代码片段,表现为背景颜色和字体颜色都被改掉了
 按照原格式输出,原生的HTML中也有,在这里添加了一些样式,加了边框,背景颜色为灰色,边框为圆角。
.pre-scrollable属性设置高度350px,并展示滚动条,无论是否超出范围,都有滚动区域显示
 输出的内容和键盘格式类似,就是添加了一个黑色的背景
 标记变量,表现为斜体
标记程序输出的内容

表格

.table 会为表格添加基本样式,表现为边距和水平方向的分割线
.table-striped 为内的每一行添加斑马条纹样式,依赖于:nth-child,所以IE8不支持条纹样式
.table-bordered 为表格和每个单元格增加边框
.table-hover 让中每一行对鼠标悬停状态做响应
.table-condensed 让表格紧凑,padding减半,左右变化不大,上下缩小的大
状态类:可以放在一行上,也可以放在一个单元格上。表现为背景颜色改变
    .active
    .success
    .info
    .warning
    .danger
.table-responseive 创建响应式表格,在screen<768px时,有滚动条,大于768没有滚动条

表单

.form-control 设置在