bootstrap：初次使用bootstrap框架

最新推荐文章于 2024-06-03 23:50:56 发布

xiaoH_ing

最新推荐文章于 2024-06-03 23:50:56 发布

阅读量1.8w

点赞数 33

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

本文链接：https://blog.csdn.net/Hr_ving/article/details/120553585

版权

bootstrap 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

bootstrap：初次使用bootstrap框架

bootstrap官网：https://v3.bootcss.com/

jQuery官网：https://jquery.com/

使用流程：

1、在浏览器中打开地址，点击下载Bootstrap

在这里插入图片描述

2、进入到下载界面，点击下载Bootstrap

在这里插入图片描述

3、下载完之后会得到一个 bootstrap-3.4.1-dist.zip 的压缩文件，将它解压，并将解压后的文件放到指定的文件夹中（之后方便通过相对路径进行引用）。

在这里插入图片描述

4、由于bootstrap的js文件依赖jQuery，（即：bootstrap的js代码是在jQuery的环境下写的，不懂的可以理解为jQuery里面封装了很多方法，bootstrap用了这些方法），所以我们需要下载jQuery，去到

jQuery官网：https://jquery.com/，点击下载

在这里插入图片描述

5、下载jQuery文件

Download the compressed, production jQuery 3.6.0 和 Download the uncompressed, development jQuery 3.6.0 是一样的，只是一个压缩过，一个没压缩（这里的压缩指的是删除了代码间的空格和换行）

在这里插入图片描述

6、将点开的文件，通过快捷键 ctrl + s 保存，然后和上面下载的bootstrap-3.4.1-dist文件夹放在一起

在这里插入图片描述

7、最后的文件结构：

我两个jQuery的文件都下载了，然后新建了一个jQuery文件用来保存

在这里插入图片描述

8、下面我们就可以新建一个html文件来使用它们了， .js 和 .min.js 两个文件只需要引入一个就好了

第一步，引入 bootstrap-3.4.1-dist文件夹中的css文件夹中的bootstrap.css或者bootstrap.min.css (上面说过，两者只是一个压缩了一个没压缩)

第二步，引入jQuery文件夹中的jquery-3.6.0.min.js文件或者jquery-3.6.0.js

第三步，引入bootstrap-3.4.1-dist文件夹中的js文件夹中的bootstrap.js或者bootstrap.min.js

第四步，接下来，我们就可以来写一段基于bootstrap框架的html代码了

代码的话，直接在官网上复制粘贴就好了，里面有各种各样好用的组件和插件

如：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>引入bootstrap框架</title>
    
    <!-- 这里导入 bootstrap的 css文件-->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    
    
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">主页</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">登录</a></li>
          <li><a href="#">注册</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">账号</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入账号名">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">密码</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
    </div>
    <div class="checkbox ">
      <label>
        <input type="checkbox"> 记住密码
      </label>
    </div>
    <button type="submit" class="btn btn-default">登录</button>
    <button type="submit" class="btn btn-default">注册</button>
  </form>
</body>
</html>


<!-- 这里导入jqeury的js文件  和  bootstrap的 js文件-->
<script src="./jQuery/jquery-3.6.0.min.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

运行结果：

PC端：

在这里插入图片描述

移动端：
在这里插入图片描述

xiaoH_ing

关注

33
点赞
踩
335

收藏

觉得还不错? 一键收藏
7
评论
bootstrap：初次使用bootstrap框架

JavaScript：初次使用bootstrap框架bootstrap官网：https://v3.bootcss.com/jQuery官网：https://jquery.com/使用流程：1、在浏览器中打开地址，点击下载Bootstrap2、进入到下载界面，点击下载Bootstrap3、下载完之后会得到一个 bootstrap-3.4.1-dist.zip 的压缩文件，将它解压，并将解压后的文件放到指定的文件夹中（之后方便通过相对路径进行引用）。4、由于bootstrap的js文件依赖
复制链接

扫一扫