boostrap初体验_hitv-m1 bootargs-CSDN博客

本文链接：https://blog.csdn.net/qq_26819733/article/details/62046907

1、前言

很久没写HTML网页了，都忘记得光光了。
HTML的中文名是超文本标记语言，本质就是特定格式的文本，可以被浏览器直接解析，只要符合语法，那么浏览器就会按语法显示。
所以我们只需要新建一个txt把文本后缀改为html，就可以开始你的html之旅了。
编写前，你需要两样东西：浏览器，文本编辑器（editplus、notepad、vscode、submit text等）
思路就是文本编辑器更改html文件，保存后，直接浏览器访问，就可以看到效果了。

2、编写前的准备

vscode（尝试新东西啊）
bootstrap文件（官网：http://www.bootcss.com/ 点击下载，选择用于生产环境的 Bootstrap下面的下载链接直接使用）
jquery（这是bootstrap依赖的，所以也要去下载，官网：http://jquery.com/ 点下载，选择production版本）

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 and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

有三个地方引用了外部文件：

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

改为自己本地引用。
我的文件目录这样子的：
这里写图片描述
修改后：

<link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.2.0.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>