代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="img/html.svg">
<!-- 引入css -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/index.css">
<!-- 引入js -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/index.css">
<style>
/* 隐藏滚轮 */
html::-webkit-scrollbar {
width: 0;
}
body::-webkit-scrollbar {
width: 0;
}
</style>
</head>
<body>
<!-- 导航条开始 -->
<nav class="navbar navbar-expand-lg py-4 sticky-top container-fluid" id="header_nav"
>
<!-- 网站名字logo -->
<a href="index.html" class="navbar-brand ms-4">前端探索者</a>
<!-- 右边折叠按钮 -->
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 中间部分 -->
<div class="navbar-collapse collapse d-none">
<ul class="navbar-nav m-auto ">
<!-- 左边菜单 -->
<li class="nav-item ">
<a href="index.html" class="nav-link active" role="button" aria-expanded="false">首页</a>
</li>
<li class="nav-item dropdown" id="QDBD">
<a href="#" class="nav-link dropdown-toggle " role="button" data-bs-toggle="dropdown"
aria-expanded="false">前端榜单</a>
<ul class="dropdown-menu" id="QDBD_Web">
<li><a href="study.html" class="dropdown-item">Bootstrap</a></li>
<li><a href="#" class="dropdown-item">Layui</a></li>
<li><a href="#" class="dropdown-item">React</a></li>
<li><a href="#" class="dropdown-item">Vue</a></li>
</ul>
</li>
<li class="nav-item dropdown" id="XXGL">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
aria-expanded="false">学习攻略</a>
<ul class="dropdown-menu" id="XXGL_Web">
<li><a href="#" class="dropdown-item">零基础学Bootstrap</a></li>
<li><a href="#" class="dropdown-item">零基础学Layui</a></li>
<li><a href="#" class="dropdown-item">零基础学React</a></li>
<li><a href="#" class="dropdown-item">零基础学Vue</a></li>
</ul>
</li>
</ul>
<!-- 中间搜索 -->
<form class="d-flex d-inline-block " role="search" id="sousuo" >
<input class="form-control rounded-0" id="sousuoneirong" type="search" placeholder="Search" aria-label="Search"
>
<button class="btn btn-outline-primary rounded-0" type="submit">搜索</button>
</form>
<!-- 右边菜单 -->
<ul class="navbar-nav m-auto d-none d-xxl-flex">
<li class="nav-item ">
<a href="myhome.html" class="nav-link " role="button" aria-expanded="false">论坛中心</a>
</li>
<li class="nav-item ">
<a href="#" class="nav-link " role="button" aria-expanded="false">我的笔记</a>
</li>
<li class="nav-item ">
<a href="#" class="nav-link " role="button" aria-expanded="false">联系我们</a>
</li>
</ul>
<!-- 用户头像 -->
<a role="button" class="btn me-1 yonghu" href="login.html">
<img src="img/weekend.awebp" class="rounded-circle">
</a>
</div>
</nav>
<!-- 折叠按钮侧导航 -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"
>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<h6 class="dropdown-header">Menu</h6>
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
前端榜单
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Bootstrap</a></li>
<li><a class="dropdown-item" href="#">Layui</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">更多</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
学习攻略
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">教你七天学会Bootstrap</a></li>
<li><a class="dropdown-item" href="#">零基础学Js</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">更多</a></li>
</ul>
</li>
<div class="dropdown-divider my-4"></div>
<h6 class="dropdown-header">More</h6>
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="#">论坛中心</a>
</li>
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="#">我的笔记</a>
</li>
<li class="nav-item ">
<a class="nav-link" aria-current="page" href="#">联系我们</a>
</li>
</ul>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">登录</button>
</div>
</div>
</div>
<!-- 导航条结束 -->
<div class="time mt-4 h3 text-center">
</div>
<!-- 内容开始 -->
<div class="container mt-4">
<div class="row">
<!-- 侧面手风琴开始 -->
<div class="col-3">
<div class="accordion" id="ad">
<div class="accordion-item">
<!-- 按钮 -->
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#start">Getting started</button>
<!-- 内容 -->
<div class="accordion-collapse collapse" id="start" data-bs-parent="#ad">
<div class="accordion-body">
<a href="" type="button" class="nav-link active btn w-100">Introduction</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">download</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Contents</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Vite</a>
</div>
</div>
</div>
<!-- 第一个 -->
<div class="accordion-item">
<!-- 按钮 -->
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#one">Layout</button>
<!-- 内容 -->
<div class="accordion-collapse collapse" id="one" data-bs-parent="#ad">
<div class="accordion-body">
<a href="" type="button" class="nav-link btn w-100">Gird</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Columns</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Gutters</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Utilities</a>
</div>
</div>
</div>
<!-- 第二个手风琴 -->
<div class="accordion-item">
<!-- 按钮 -->
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#two">Content</button>
<!-- 内容 -->
<div class="accordion-collapse collapse" id="two" data-bs-parent="#ad">
<div class="accordion-body">
<a href="" type="button" class="nav-link btn w-100">Roboot</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Typography</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Images</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Tables</a>
</div>
</div>
</div>
<!-- 第三个手风琴 -->
<div class="accordion-item">
<!-- 按钮 -->
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#three">Forms</button>
<!-- 内容 -->
<div class="accordion-collapse collapse" id="three" data-bs-parent="#ad">
<div class="accordion-body">
<a href="" type="button" class="nav-link btn w-100">Overview</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Form control</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Select</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Range</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Input group</a>
</div>
<div class="accordion-body">
<a href="" type="button" class="btn w-100">Floating lables</a>
</div>
</div>
</div>
<div class="accordion-item">
<!-- 按钮 -->
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#four">Components</button>
<!-- 内容 -->
<div class="accordion-collapse collapse" id="four" data-bs-parent="#ad">
<div class="accordion-body">
<a href="" type="button" class="nav-link btn w-100">Popovers</a>
</div>
</div>
</div>
<div class="accordion-item">
<!-- 按钮 -->
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#five">Helpers</button>
<!-- 内容 -->
<div class="accordion-collapse collapse" id="five" data-bs-parent="#ad">
<div class="accordion-body">
<a href="" type="button" class="nav-link btn w-100">Clearfix</a>
</div>
</div>
</div>
</div>
</div>
<!-- 正文开始 -->
<div class="col-9 rounded-3" style="background-color: #ffffff;">
<div>
<!-- 1 -->
<section>
<h1 class="my-3">Get started with Bootstrap</h1>
<p class="zhengwen">Bootstrap is a powerful, feature-packed
frontend toolkit. Build anything—from prototype to production—in minutes.</p>
<h3>Quick start </h3>
<p class="zhengwen1">1.Create a new index.html file in your project root. Include
the <meta name="viewport"> tag as well for proper responsive behavior in mobile
devices.</p>
<p class="zhengwen1">2.Include Bootstrap’s CSS and JS. Place the <link> tag in
the <head> for our CSS, and the <script> tag for our JavaScript bundle
(including Popper for positioning dropdowns, poppers, and tooltips) before the closing
</body>. Learn more about our CDN links.</p>
<p class="zhengwen1">3.Hello, world! Open the page in your browser of choice to see
your Bootstrapped page. Now you can start building with Bootstrap by creating your own
layout, adding dozens of components, and utilizing our official examples.</p>
<h3>Next steps</h3>
<p class="zhengwen1">Read a bit more about some important global environment
settings that Bootstrap utilizes.</p>
<p class="zhengwen1">Read about what’s included in Bootstrap in our contents section
and the list of components that require JavaScript below.</p>
<p class="zhengwen1">Need a little more power? Consider building with Bootstrap by
including the source files via package manager.</p>
<p class="zhengwen1">Looking to use Bootstrap as a module with <script
type="module">? Please refer to our using Bootstrap as a module section.</p>
<h3>Community</h3>
<p class="zhengwen1">Read and subscribe to The Official Bootstrap Blog.
</p>
<p class="zhengwen1">Ask questions and explore our GitHub Discussions.</p>
<p class="zhengwen1">Discuss, ask questions, and more on the community Discord or
Bootstrap subreddit.</p>
<p class="zhengwen1">Chat with fellow Bootstrappers in IRC. On the irc.libera.chat
server, in the #bootstrap channel.</p>
</section>
<!-- 2 -->
</div>
</div>
</div>
</div>
<!-- 底部开始 -->
<div class="container">
<hr>
<footer class="pt-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>前端探索者</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">首页</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">前端榜单</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">学习攻略</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">软件下载</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">了解更多</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>编辑器推荐</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">VsCode</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">WebStorm</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Sublime</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">KindEditor</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">...</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>框架官方连接</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="https://getbootstrap.com/" target="_blank"
class="nav-link p-0 text-muted">BootStrap</a></li>
<li class="nav-item mb-2"><a href="https://cn.vuejs.org/" target="_blank"
class="nav-link p-0 text-muted">Vue</a></li>
<li class="nav-item mb-2"><a href="https://react.dev/" target="_blank"
class="nav-link p-0 text-muted">React</a></li>
<li class="nav-item mb-2"><a href="https://www.ilayuis.com/" target="_blank"
class="nav-link p-0 text-muted">Layui</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">...</a></li>
</ul>
</div>
<!-- 列偏移 -->
<div class="col-md-5 offset-md-1 mb-3">
<h5>有疑问请私信官方</h5>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">您的邮箱地址</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="1844494570@qq.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">请输入</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="d-flex justify-content-end mt-3">
<button class="btn btn-primary" type="submit" id="submit">发送</button>
</div>
</div>
</div>
<hr>
<p class="text-center text-muted">© 2023-12-19 2022080188 Pooh 制作,有事联系18658491360</p>
</footer>
</div>
<!-- 底部结束 -->
<script>
// 1.鼠标经过显示菜单 移出隐藏 淡入淡出
$("#QDBD").mouseover(function () {
$("#QDBD_Web").fadeIn()
})
$("#QDBD").mouseleave(function () {
$("#QDBD_Web").fadeOut()
})
$("#XXGL").mouseover(function () {
$("#XXGL_Web").fadeIn()
})
$("#XXGL").mouseleave(function () {
$("#XXGL_Web").fadeOut()
})
// 切换状态
$("#new").click(function () {
$("#new a").addClass("active")
$("#recommend a").removeClass("active")
})
$("#recommend").click(function () {
$("#recommend a").addClass("active")
$("#new a").removeClass("active")
})
// 关闭广告
$("#closebtn").click(function () {
$("#advertisement").hide()
$("#closebtn").hide()
})
let i=0
//时间
function getTime() {
let currentDate = new Date()
let hours = currentDate.getHours()
let minutes = currentDate.getMinutes()
let second = currentDate.getSeconds()
i++;
$(".time").html("现在是："+hours+":"+minutes+":"+second+"<br>您已在线学习："+i+"秒")
}
getTime()
setInterval(getTime,1000)
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
