Bootstrap导航栏和轮播图案例
⼀、Bootstrap导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstarp</title>
<!--Bootstrap-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)-->
<script src="js/jquery-3.5.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>菜鸟教程</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">⾸页</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">JavaScriptS</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>这是菜鸟教程主页</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>HTML</h3>
<p>超⽂本标记语⾔（英语：HyperText Markup Language，简称：HTML）是⼀种⽤于创建⽹页的标准标记语⾔。
您可以使⽤ HTML 来建⽴⾃⼰的 WEB 站点，HTML 运⾏在浏览器上，由浏览器来解析。
在本教程中，您将学习如何使⽤ HTML 来创建站点。
HTML 很容易学习！相信您能很快学会它！
</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>CSS</h3>
<p>通过使⽤ CSS 我们可以⼤⼤提升⽹页开发的⼯作效率！在我们的 CSS 教程中，您会学到如何使⽤ CSS 同时控制多重⽹页的样式和布局。</p >
</div>
<div id="menu3" class="container tab-pane fade"><br>
<h3>JavaScriptS</h3>
<p>JavaScript 是 Web 的编程语⾔。
所有现代的 HTML 页⾯都使⽤ JavaScript。
JavaScript ⾮常容易学。
本教程将教你学习从初级到⾼级 JavaScript 知识。
</p>
</div>
</div>
</div>
</body>
</html>
⼆、Bootstrap轮播图（图⽚带⽂字描述）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>轮播图</title>
<!--Bootstrap-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)-->
<script src="js/jquery-3.5.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>动漫</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="image/2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>天空</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="image/3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>⽥野</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
js导航栏下拉菜单<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论