1、什么是Bootstrap?
- Bootstrap是由Twiter的Mark Otto和Jacob ThornTon 两位设计师开发的。
- Bootstrap是2011年8月在GitHub上发布的开源产品（开发源代码）。
- Bootstrap是个用于快速开发Web应用程序和网站的前端框架 是基于Html、css JavaScript的。
- Bootstrap 可以构建出非常优雅的前端界面，并且占用资源小。
2、为什么要去使用BootStrap
- 移动设备优先、框架包含了贯穿于整个库的移动设备优先的样式、
- 浏览器支持。所有的主流浏览器都支持。
- 响应式设计！响应式指的是一个网站能够兼容和自适应于多种终端设备(手机、平板、电脑)访问。
3、Bootstrap部署！
3.1 Bootstrap 下载步骤：
打开下载的中文地址：http://www.bootcss.com/
步骤一
步骤二：
步骤三
3.2 把Bootstrap部署到项目步骤：
步骤1：解压下载好的Bootstrap 会看到如图的文件夹
步骤二：把上图文件加到项目目录中去：
注意点：在加bootstrap.min.js 文件之前必须 引入 Jquery文件 不然就会出现如下图错误!
4、Bootstrap之布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
1、.container 类用于固定宽度并支持响应式布局的容器。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap的初次使用</title>
<!--表示移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--加入Bootstarp 核心css 文件-->
<link rel="stylesheet" href="bs/css/bootstrap.min.css">
<!--加入jquery文件-->
<!-- <script src="js/jquery-1.12.4.js"></script> -->
<!--加入Bootstrap js 文件-->
<script src="bs/js/bootstrap.min.js"></script>
</head>
<body>
<!--固定布局实例-->
<div class="container" style="border: 1px solid red">
哈喽！
</div>
</body>
</html>2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
实例：
<!--流式布局实例-->
<div class="container-fluid" style="border: 1px solid red">
哈喽！
</div>
6877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
