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>