Bootstrap(前端开发框架一)

目录

一、什么是WWW？

1、What：Bootstrap是什么

2、Why：为什么学Bootstrap？

3、Where：什么时候用Bootstrap？

二、Bootstrap的环境安装

1、下载Bootstrap库

2、页面中引入库

三、部分题目案例

准备工作

例1：查询按钮原生态实现对比Bootstrap方式实现

例2：演示Bootstrap页面在手机浏览器中展示效果

例3：首页导航&搜索区域原生态实现（div+css）

例4：首页导航&搜索区域Bootstrap实现&搭首页框架

1、导航条组件的使用-Navbar

2、布局容器

3、表单-Forms+输入框组组件-Input group

4、栅格系统-Grid system

---

一、什么是WWW？

1、What：Bootstrap是什么

①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架；

②.是一个用于快速开发Web应用程序和网站的前端框架；

③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷。

概述：

Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架。

2、Why：为什么学Bootstrap？

①响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）；
卫
②移动设备优先（自 Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的
样式）；
③浏览器支持（所有的主流浏览器都支持Bootstrap）；
④容易上手 ；
⑤它为开发人员创建接口提供了一个简洁统一的解决方案；
⑥它是开源的。

3、Where：什么时候用Bootstrap？

①太过复杂的电商类型的项目（电商网站分类太多)；
②企业网站、博客、网站后台之类的网站。

二、Bootstrap的环境安装

1、下载Bootstrap库

【网址】http://www.bootcss.com/

① Download Bootstrap：点击该按钮，可以下载Bootstrap CSS、JavaScript和字体的预编译的压缩版本，不包含文档和最初的源代码文件。
②Download Source：点击该按钮，您可以直接从from上得到最新的 Bootstrap LESS和JavaScript源代