Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

bootstrap的好处：

响应式布局：同一套页面可以兼容不同分辨率的设备
定义很多的CSS样式和js插件，为开发人员直接使用这些样式和插件加快开发速度，得到丰富的页面效果。

Bootstrap基本框架

去bootstrap的官网下载其其压缩包，解压得到 css文件，js文件还有一个fonts文件，将其复制到项目路径下，在官网中的基本模板复制到页面进行配置。（所谓配置是把基本模板中引用互联网上的js啊css啊之类的文件改为调用调入本地的文件）

<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

这个是基本确定的模板，不需要改变。

CSS文件

 <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

将href改成本项目的css/bootstrap.min.css，通过CTRL + 鼠标可以验证路径是否正确。

 <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

低版本浏览器兼容

 <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

这两个是兼容低版本的浏览器，因此把这两个注销，因为前面下载到的压缩包里面没有包含这两个文件。

JavaScript插件

   <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

需要下在jQuery，然后解压到js文件目录下，下把上面的src改成下面的目录

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>

所以bootstrap的基本模板如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    下面这两个 是兼容低版本的浏览器
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <![endif]-->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>

<h1>你好，世界！</h1>

</body>
</html>

bootstrap的响应式布局

概念：同一套页面可以兼容不同分辨率的设备

实现：依赖于栅格系统（尽管不同的屏幕尺寸，系统把每一行分成12个格子）

如何使用：

1.定义容器

.container （固定宽度）
.container-fulid (100%宽度）

2.定义行（row）

3.定义元素，指定在不同的设备上元素占用的格子数

设备代号：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    下面这两个 是兼容低版本的浏览器
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <![endif]-->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>

    <style>
        .inner{
            border: solid red 1px;
        }
    </style>
</head>
<body>
<!--定义容器-->
<div class="container">
    <!--定义行row-->
    <div class="row">
        <!--定义元素，注意格式-->
        <!--在md设备是一个div占4个格子，在sm设备上一个div占6个格子-->
        <div class="col-md-4 col-sm-6 inner">1</div>
        <div class="col-md-4 col-sm-6 inner">2</div>
        <!--<div class="col-md-4 col-sm-6 inner">3</div>-->
    </div>
</div>
</body>
</html>

注意事项：

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。（即栅格系统向上兼容，比它代码中设置的范围大都能兼容）但是不支持向下兼容，此时一个元素占满一行。
超出12个格子会自动换行。

来源：CSDN

作者：承夕

链接：https://blog.csdn.net/weixin_45062761/article/details/104291321

标签

框架

Web框架Bootstrap之基本介绍

Bootstrap基本框架

bootstrap的响应式布局