响应式布局---2. Bootstrap前端开发框架

1.1 介绍

Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。

• 中文官网：http://www.bootcss.com/
• 官网：http://getbootstrap.com/
• 推荐使用：https://v3.bootcss.com/

1.2 使用

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
Bootstrap使用四部曲：

1.2.1 创建文件夹结构

在https://v3.bootcss.com/下载bootstrap的压缩文件，解压后将其中的文件夹(css,fonts,js)复制到刚刚建立的bootstrap文件夹下：

1.2.2 创建html骨架结构、引入相关样式文件

1.2.3 书写内容

• 直接拿Bootstrap预先定义好的样式来用
• 修改Bootstrap原来的样式，注意权重问题
• 学好Bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

    （成功）Success
    
    
登陆
    
未成功

/* 利用我们自己写的样式覆盖原先的样式 */
.login {
    width: 88px;
    height: 45px;
}

1.3 布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container,它提供两个做此用处的类。（注意：这个类名必须是container，不可更改）

.container类

• 响应式布局的容器 固定宽度
• 大屏（>=1200px）宽度定为1170px
• 中屏（>=992px）宽度定为970px
• 小屏（>=768px）宽度定为750px

• 超小屏（100%）
  上述宽度都是设定好的，不可以像之前一样任意修改

  .container-fluid类

• 流式布局容器百分比宽度
• 占据全部视口(viewport)的容器
• 适合于单独移动端开发

    
    
    
123
    
    
abc

超小屏：

大屏：