Bootstrap之初始Bootstrap个人总结

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>

Bootstrap之初始Bootstrap个人总结

猜你喜欢