有关Bootstrap的随手笔记

 bootstrap 的主旨

    简洁,直观,强悍的前端开发框架.让web浏览器开发变得更迅速.简单,响应式开发,移动设备优先。

-案列欣赏:

    http://cn.vuejs.org vuejs官网

    http://reactjs.org          reactjs官网

    https://www.bootcss.com    bootstrap官网

    共同特点 ： 响应式 （随着屏幕尺寸的改变,网页排版随之改变,目的是一套代码适配各种设备pc Ipad 手机都可以显示）

-版本:

    目前主流的版本有两个 一个是3.X  一个4.X 

    3.X用的最多的是 3.3.7

    4.X用的最多的是4.0.0

    4.Xz在3.X的基础上废除了一些东西 新增了一些东西  以下笔记内容以3.3.7为例。

- 解压

     bootstrap-3.3.7-dist

                css/        存放bootstrap的样式文件，

                            存放了8个文件，但有2个有用，

                            bootstrap.css/bootstrap.min.css

                fonts/      存放bootstrap的字体文件

                            存放了5个字体文件

                js/        存放bootstrap的脚本文件，

                            3个js文件，分别是bootstrap.js/bootstrap.min.js/npm.js

                            npmjs： 提供给Nodejs使用，暂时用不到

  -  引入到html文件中

     

---

-全局CSS样式

    最外层的容器 有两个class名字 分别是：container    container-fuild

    区别 前者是 用于固定宽度并支持响应式布局的容器  后者是用于100%宽度 占据全部视口(viewport）的容器

    栅格系统 （ 贼**的重要 ）

    bootstrap自动将分成12列

    行 :rwo  给添加的行 要放在 .container 或 .container-fuid 中

     列:col-屏幕型号-几列

    屏幕型号 

        [  lg   大屏 ]     [  md   中屏 ]     [  sm   小屏 ]     [  xs   超小屏 ]

            只要你用Bootstrap，

            凡是看见了类名带有lg，表示该样式是在大屏下生效（ viewport > 1200px）

            凡是看见了类名带有md，表示该样式是在大屏和中屏下生效（ 992px < viewport <= 1200px）

            凡是看见了类名带有sm，表示该样式是在大屏、中屏和小屏下生效（ 768px < viewport <= 1200px）

            凡是看见了类名带有xs，表示该样式是在任何屏幕下都生效

    - 栅格系统中的列可以同时添加多个class，例如：（可以复制站体出去 在网页显示 一个响应式布局）

       

         

.col-lg-4

         

.col-lg-4

         

.col-lg-4

         

.col-lg-4