Bootstrap之初始Bootstrap个人总结

爱被打了一巴掌 2022-05-26 10:16 302阅读 0赞

**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/ **

**步骤一**

**    ![70][]**

** **

**步骤二：**

**![70 1][]**

**    **

**步骤三**

**![70 2][]**

**  3.2 把Bootstrap部署到项目步骤：**

**     步骤1：解压下载好的Bootstrap 会看到如图的文件夹**

**    ![70 3][]**

** 步骤二：把上图文件加到项目目录中去：**

**  ![70 4][]**

**    注意点：在加bootstrap.min.js 文件之前必须 引入 Jquery文件 不然就会出现如下图错误!**

**   ![70 5][]**

**   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">
        
        <link rel="stylesheet" href="bs/css/bootstrap.min.css">
        
      
        
        <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>

[70]: /images/20220526/eff290afa620416c949e12863c8365d5.png
[70 1]: /images/20220526/ce2951fa51334695aef0f44abe32b05b.png
[70 2]: /images/20220526/621d0e7c68d945cb8136b5565b6a9a73.png
[70 3]: /images/20220526/6e2359d3104447ceb65f286dfd026f1e.png
[70 4]: /images/20220526/cf754aea153848ada361cafef5882687.png
[70 5]: /images/20220526/12006dd6710f4323917cc0d6dab98195.png