bootstrap笔记

响应式页面

实现不同屏幕上的不同展现方式,使网站在移动端和电脑端都有良好的浏览体验。
bootstrap提供了两个类: .container和.container-fluid。
.container 类用于固定宽度并支持响应式布局的容器:


固定宽度

container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器:


100%宽度
bootstrap下实现响应式:栅格系统

栅格系统通过一系列的行(row)和列(col)来创建页面布局,row必须包含在.container或.container-fluid中,只有col能作为row的直接子元素,我们需要展示的内容就放在col中。

  • 一行可以包含1-12个列,当超过12列时,多出的列将另起一行。
  • col根据宽度可以分为四种:.col-xs-,.col-sm-,.col-md-,.col-lg-表示该列所跨越的列数。
    .col-lg-
    只对大PC屏幕有效
    .col-md-对普通PC和大屏幕PC都有效
    .col-sm-
    对平板、普通PC、大屏幕PC都有效
    .col-xs-*对手机、平板、普通PC、大屏幕PC都有效
    可以对一个列在不同屏幕下指定不同的宽度:

        
    
    
    
        

在移动端占12列,普通PC端占8列


移动端

PC端
  • 可以指定列的偏移量,不同屏幕下也可以设置不同偏移量:
 

移动端占10列,向右偏移一列,PC端占6列,向右偏移3列,通过偏移可以很方便地设置居中


移动端

PC端
  • 可以通过添加新的row和col到已存在的col中实现嵌套:
    
        
    
    
    
        
列嵌套
  • 列排序。通过push和pull来对列进行排序:
    col-md-4居左,col-md-8居右,如果想要互换位置,col-md-4需向右移动8个列,同时将col-md-8向左移动4个列。


    移动前

    给col-md-4加上col-md-push-8,col-md-8加上col-md-pull-4:


    移动后

    如果只移动col-md-4或者只col-md-8是不可以的,会造成其中一列挡住了另一列。
    如:当只移动了col-md-4时:

    就会出现col-md-4移动后,被col-md-8挡住了的效果。
    通过上面的例子发现其实pull和push本质上也是对列的偏移,好像和offset一样,但两者还是有区别的:
    1.offset只能实现向右偏移,而pull和push可以分别实现向左偏移和向右偏移。
    2.offset偏移后,该列的位置会影响其他列的位置,如当一个列使用了col-md-offset-2,那么其他的列也会因为该列的偏移向右偏移两列,而如果使用了col-md-push-2后,对其他列的位置不会产生影响,所以上面的例子才会出现只移动一列,其中一列将另一列给挡住的情况。
    3.实现方式不同:offset是通过设置margin-left实现的,而push和pull是通过相对定位实现偏移的。

其他全局css样式
1.代码:提供了一些标签用来展示不同的内容

如:标记代码片段,标记用户输入的内容,标记变量等。

2.表格:为表格提供了一些类可以赋予其样式
  • .table:赋予表格基本的样式
  • .table-striped:给每一行添加斑马条纹样式
  • .table-hover:给行添加悬停样式
  • .table-condensed:单元格内边距减半,让表格更加紧凑
  • .table-borderd:每个单元格添加边框
  • .active、.success、.info、.warning、.danger:给单元格或者行设置颜色(状态)
  • .table-responsive:包裹.table元素,即可创建响应式表格,在屏幕宽度小于768px时,出现水平滚动条。
3.表单
  • .form-control:为