前端之Bootstrap框架

一、介绍

1、特点

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。支持响应式布局，并且在V3版本之后坚持移动设备优先。

2、下载

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。

v3中文地址：https://v3.bootcss.com/getting-started/#download

由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

3、引入Bootstrap

使用link引入bootstrap.min.css

引入bootstrap.min.js要依赖jquery，所以先要导入jquery，然后导入bootstrap.min.js

    
    
    
    
    


...

4、布局

（1）布局容器

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

（2）栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

超小屏幕手机(< 768px)                                  类前缀：.col-xs-

小屏幕 平板 (≥768px)                                     类前缀：.col-sm-

(≥768px)中等屏幕 桌面显示器 (≥992px)         类前缀：.col-md-

大屏幕 大桌面显示器 (≥1200px)                      类前缀：.col-lg-

（3）栅格练习示例

    
    
    
    
    
    



    

        .col-xs-12 .col-md-8
        .col-xs-6 .col-md-4
    

         

        .col-xs-6 .col-md-4

        .col-xs-6 .col-md-4

        .col-xs-6 .col-md-4

    

         

        

.col-xs-6

        

.col-xs-6

    

         

        

.col-md-5

        .col-md-6 col-md-offset-1