[已解决]bootstrap 下载源码文件 导入html界面

tengke

<nav class="navbar navbar-default">
  <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="#">Brand</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 class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

点击下拉没有反应
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

使用官网提供的可以正常使用
麻烦哪位大佬看看  我要在本地导入css文件 需要怎么操纵呢

最佳答案

月排行榜 / 总排行榜

isdkz

2023-4-2 17:14:03

根据你的描述，你想在本地导入 Bootstrap CSS 文件。你需要按照以下步骤操作：

1、首先，前往 Bootstrap 官网（https://getbootstrap.com/）下载 Bootstrap 源码。选择你需要的版本，然后点击 "Download"。下载完成后，解压缩文件。

2、在解压缩后的文件夹中，你会看到 "dist" 文件夹。将 "dist" 文件夹复制到你的项目目录下。

3、接下来，修改你的 HTML 文件以使用本地的 Bootstrap 文件。将以下链接和脚本替换为本地文件的引用：

原始链接和脚本：

1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
   
2. <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   
3. <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

复制代码

替换为本地文件的引用：

1. <link rel="stylesheet" href="dist/css/bootstrap.min.css">
   
2. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   
3. <script src="dist/js/bootstrap.min.js"></script>

复制代码

请注意，我将 jQuery 的 CDN 链接保留为外部链接。如果你也想本地使用 jQuery，可以从 jQuery 官网（https://jquery.com/download/）下载并将其放在项目目录中的一个适当位置。

4、保存 HTML 文件并重新加载页面。现在，Bootstrap 应该从本地文件加载，并且你的下拉菜单等功能应该正常工作。

如果你仍然遇到问题，请检查浏览器的控制台以获取错误信息。这可能有助于你找到解决方案。

跳转到最佳答案楼层

isdkz

根据你的描述，你想在本地导入 Bootstrap CSS 文件。你需要按照以下步骤操作：

1、首先，前往 Bootstrap 官网（https://getbootstrap.com/）下载 Bootstrap 源码。选择你需要的版本，然后点击 "Download"。下载完成后，解压缩文件。

2、在解压缩后的文件夹中，你会看到 "dist" 文件夹。将 "dist" 文件夹复制到你的项目目录下。

3、接下来，修改你的 HTML 文件以使用本地的 Bootstrap 文件。将以下链接和脚本替换为本地文件的引用：

原始链接和脚本：

1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
   
2. <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   
3. <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

复制代码

替换为本地文件的引用：

1. <link rel="stylesheet" href="dist/css/bootstrap.min.css">
   
2. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   
3. <script src="dist/js/bootstrap.min.js"></script>

复制代码

请注意，我将 jQuery 的 CDN 链接保留为外部链接。如果你也想本地使用 jQuery，可以从 jQuery 官网（https://jquery.com/download/）下载并将其放在项目目录中的一个适当位置。

4、保存 HTML 文件并重新加载页面。现在，Bootstrap 应该从本地文件加载，并且你的下拉菜单等功能应该正常工作。

如果你仍然遇到问题，请检查浏览器的控制台以获取错误信息。这可能有助于你找到解决方案。

歌者文明清理员

要在本地导入Bootstrap CSS文件，可以按照以下步骤操作：

下载Bootstrap的CSS文件。你可以访问官网https://getbootstrap.com/docs/3.4/getting-started/#download，选择需要的版本并下载。

将下载的Bootstrap CSS文件解压缩到你的项目目录中。

在HTML文件中添加以下链接标签，引用解压后的Bootstrap CSS文件：

1. <link rel="stylesheet" href="路径/bootstrap.min.css">

复制代码

其中，路径是指Bootstrap CSS文件所在的位置，根据实际情况修改。

在HTML文件中添加以下脚本标签，引用jQuery和Bootstrap JavaScript文件：

1. <script src="路径/jquery.min.js"></script>
   
2. <script src="路径/bootstrap.min.js"></script>

复制代码

其中，路径是指jQuery和Bootstrap JavaScript文件所在的位置，根据实际情况修改。

保存HTML文件，并重新加载页面即可。
请注意，为了正确应用Bootstrap样式，你需要遵循Bootstrap文档中对标记的要求。详细内容请参考Bootstrap官网的文档。

tengke

歌者文明清理员 发表于 2023-4-2 17:58
要在本地导入Bootstrap CSS文件，可以按照以下步骤操作：

下载Bootstrap的CSS文件。你可以访问官网https ...

jquery.min.js"
我下载的没有这个  是生产环节
要下载源代码吗