文章分类
热门文章

最新文章

Bootstrap安装教程

发布时间：2021-06-22 15:26:45

bootstrap安装教程目录


1、Bootstrap版本说明

（1）Bootstrap的版本

  • 已编译版。已编译好的js和css文件，包含所有的已编译文件，可以整体引入框架，也可以部分引入你需要的框架组件。

  • 源码版。你可以根据需要修改源码后，重新编译出定制版的Bootstrap。

（2）bootstrap版本选择建议

对于一般应用，俺老刘不建议对源代码进行修改和定制，因为这样做的后果是官方升级版本之后你又要定制一番，非常麻烦，况且对新手来说关于定制的那些知识会让学习变得麻烦。还不如直接使用官方的已编译好的css和js文件，对于不满足自己需求的，另外写css文件进行重写即可。 对于源码，建议那些想了解一下框架运行原理的可以参考一下。

（3）最简版本

对于那些和俺老刘一样有洁癖，不喜欢臃肿代码的人来说，可以直接提取css/bootstrap.min.css和js/bootstrap.bundle.min.js两个文件，就完全可以使用Bootstrap了，是不是太爽了。

2、Bootstrap5下载安装

（1）普通安装

1 、Bootstrap下载。 Bootstrap5安装非常简单，下载已编译版js和css文件（由于框架经常会更新，源码下载建议到www.bootstrap.cn 下载最新版本），解压缩后将目录改名称为bootstrap5，放在你的网站目录，例如static目录下，之所以改名是为了书写的时候简单，避免输错。

2、在你的网页<head> </head>之间，添加

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/bootstrap5/css/bootstrap.min.css" >


3、在你的网页 </body>之前，添加

<script src="/static/bootstrap5/js/bootstrap.bundle.min.js" ></script>


注意：要确保bootstrap.min.css和bootstrap.bundle.min.js确实在这个路径。 另外如果你使用了最简安装或改变了路径，要按照你的实际路径写。

4、你的代码就可以写在<body>和<script之间了。

（2）最小化安装

1、直接下载最小化版本，或者下载已编译版本文件，提取css/bootstrap.min.css和js/bootstrap.bundle.min.js两个文件放在静态文件所在目录下的Bootstrap5文件夹中。 2、在你的网页<head> </head>之间，添加

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="bootstrap5/css/bootstrap.min.css" >


3、在你的网页 </body>之前，添加

<script src="bootstrap5/js/bootstrap.bundle.min.js" ></script>


注意：这里用相对路径可以在编辑静态页面预览效果的时候不用放在服务器，直接用浏览器打开即可。

3、Bootstrap5测试模板

由于官方自带的模板文件根本不能测试出系统是否正常运行，所以我写了个简易的测试模板，你在开发的时候可以直接复制来用，避免出错，本模板是演示用的，直接提取css/bootstrap.min.css和js/bootstrap.bundle.min.js两个文件放在演示案例所在目录的Bootstrap5文件夹中。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Bootstrap5开发模板</h1>
  <div class="text-center text-success fs-1">看到我居中，颜色绿色表示起作用了！</div>


    
    <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

11.png


安装完成，你可以看下一篇文《bootstrap框架怎么用？10分钟教你学会使用bootstrap开发网页》

返回顶部