Bootstrap_01_入门、全局CSS样式【栅格系统】

目录

一、What?: Bootstrap是什么

二、Why?:用到它的原因

三、Where?:在哪里要用到它

四、环境安装

五、Bootstrap CSS

        1.H5文档类型

        2.移动设备优先

        3.布局容器

                1>固体容器【class=”container”】

                2>流体容器【class=”container-fluid”】

        4、栅格系统(Grid System)

                1>概念：

                2>交换位置：右移动：push  左移动：pull

---

一、What?: Bootstrap是什么

          Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。

1. Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。
2. 用于快速开发Web应用程序和网站的前端框架
3. Bootstrap是基于HTML、CSS、JS的，简介灵活，使Web开发更加快捷
4. 总结：Bootstrap是一个建立在一个页面，可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架

二、Why?:用到它的原因

1. 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
2. 移动设备有限
3. 浏览器支持
4. 容易上手

三、Where?:在哪里要用到它

1. 企业网站、博客、网站后台之类的网站
2. 注意：非电商(电商网站分类很多)

四、环境安装

1. 到Bootstrap官网下载Bootstrap库。官网：Bootstrap中文网
2. 页面中引入库：

        1.bootstrap.min.css：在Bootstrap中有很多CSS样式。所以要有CSS文件

       2.bootstrap.min.js：严格意义上来说，Bootstrap是基于jQuery的一个库，jQuery又是javaScript的一个库。所以又要引入一个bootstrap.min.js库

案例：在页面上创建一个Button,观察原生态的button和Bootstrap的button区别

原生button:（只有一个普通的按钮）

        <button>原生button</button>

Bootstrap的button:

        1、<button class="btn">Bootstrap的button</button>

        （刷新页面看一下效果对比，Bootstrap的按钮很明显 样式不一样，加了背景色，加了按钮边框的样式）

        2、<button class="btn btn-default">Bootstrap的button</button>

        （现在我们再来看效果，边框，背景色，而且还加了鼠标移动上来，和鼠标离开的样式。如果我们用js来写。想想是不是要复杂很多。现在这些效果全都封装在Bootstrap中。是不是很爽。）