bootstrap 下载源码文件 导入html界面
本帖最后由 tengke 于 2023-4-2 17:16 编辑<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文件 需要怎么操纵呢
根据你的描述，你想在本地导入 Bootstrap CSS 文件。你需要按照以下步骤操作：
1、首先，前往 Bootstrap 官网（https://getbootstrap.com/）下载 Bootstrap 源码。选择你需要的版本，然后点击 "Download"。下载完成后，解压缩文件。
2、在解压缩后的文件夹中，你会看到 "dist" 文件夹。将 "dist" 文件夹复制到你的项目目录下。
3、接下来，修改你的 HTML 文件以使用本地的 Bootstrap 文件。将以下链接和脚本替换为本地文件的引用：
原始链接和脚本：
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
替换为本地文件的引用：
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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文件：
<link rel="stylesheet" href="路径/bootstrap.min.css">
其中，路径是指Bootstrap CSS文件所在的位置，根据实际情况修改。
在HTML文件中添加以下脚本标签，引用jQuery和Bootstrap JavaScript文件：
<script src="路径/jquery.min.js"></script>
<script src="路径/bootstrap.min.js"></script>
其中，路径是指jQuery和Bootstrap JavaScript文件所在的位置，根据实际情况修改。
保存HTML文件，并重新加载页面即可。
请注意，为了正确应用Bootstrap样式，你需要遵循Bootstrap文档中对标记的要求。详细内容请参考Bootstrap官网的文档。 歌者文明清理员 发表于 2023-4-2 17:58
要在本地导入Bootstrap CSS文件，可以按照以下步骤操作：
下载Bootstrap的CSS文件。你可以访问官网https ...
jquery.min.js"
我下载的没有这个是生产环节
要下载源代码吗
页:
[1]