Bootstrap的下载和使用

最新推荐文章于 2023-09-21 12:39:44 发布

桃花扇J

最新推荐文章于 2023-09-21 12:39:44 发布

阅读量1.2k

点赞数 2

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_44584442/article/details/105455847

版权

Bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Bootstrap的第一篇，先讲一下下载版本和引用方式吧

首先下载一定要找对网站！！！https://getbootstrap.com/，认准啦，别去中文网站下载，重要的事情看三遍！！！

现在主要使用的两个版本，一个是v4.4，戳上面的链接，另一个是v3.3.7,戳这个链接 https://getbootstrap.com/docs/3.3/，先大概讲一下两个版本的区别，v4.4的响应式布局是基于CSS3中的弹性盒子flex，而v3.3.7则是基于CSS2中的流式布局flow: left。因此两者在用法上还是有区别的，后续会详细讲解

接下来康康怎么引用吧，这里以v4.4为主，进入官网有如下按钮

Download则下载后本地引入，有两个类型Complied CSS and JS 和 Source files，个人建议下载前者就好了，源文件适合需要修改框架的使用者。Get started是引入超链接，如下一个css文件，两个js文件，直接在官网复制链接就好，看起来挺香

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>

下一节说响应式布局原理