BootStrap——BootStrap组件
作者：互联网
1、动态监听
（1）代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap插件</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav"><!--BootStrap的导航组件-->
<li class="nav-item">
<a class="nav-link" href="#section1">动物</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">植物</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">微生物</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
地球
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">森林</a>
<a class="dropdown-item" href="#section42">草原</a>
<a class="dropdown-item" href="#section42">湖泊</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>动物</h1>
动物是生物的一个种类。它们一般以有机物为食，能感觉，可运动，能够自主运动。活动或能够活动之物。包括人。
根据化石研究，地球上最早出现的动物源于海洋。早期的海洋动物经过漫长的地质时期，逐渐演化出各种分支，丰富了早期的地球生命形态。在人类出现以前，史前动物便已出现，并在各自的活动期得到繁荣发展。后来，它们在不断变换的生存环境下相继灭绝。但是，地球上的动物仍以从低等到高等、从简单到复杂的趋势不断进化并繁衍至今，并有了如今的多样性。
科学家们把现存的人类已知的动物根据体内有无脊柱分为无脊椎动物和脊椎动物两大类。
科学家已经鉴别出46900多种脊椎动物。包括鲤鱼、黄鱼、草鱼等鱼类动物，蛇、蜥蜴等爬行类动物，青蛙、娃娃鱼等两栖类动物，鸟类以及红熊猫等哺乳类动物。
科学家们还发现了130多万种无脊椎动物。这些动物中多数是昆虫，昆虫中多数是甲虫。鼻涕虫、蚯蚓，乌贼、牡蛎、红海星、水母，蜘蛛，珊瑚虫、放射虫、蛔虫、猪肉绦虫、沙蚕、蜗牛、蛞蝓等都属于无脊椎动物。
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>植物</h1>
植物是生命的主要形态之一，包含了如树木、灌木、藤类、青草、蕨类，及绿藻、地衣等熟悉的生物。种子植物、苔藓植物、蕨类植物和裸子植物等植物中，据估计现存大约有350 000个物种。绿色植物大部分的能源是经由光合作用从太阳光中得到的，温度、湿度、光线、
淡水是植物生存的基本需求。种子植物共有六大器官：根、茎、叶、花、果实、种子。绿色植物具有光合作用的能力——借助光能及叶绿素，在酶的催化
作业下，利用水、无机盐和二氧化碳进行光合作用，释放氧气，吸收二氧化碳，产生葡萄糖等有机物，供植物体利用。
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>微生物</h1>
微生物包括：细菌、病毒、真菌以及一些小型的原生生物、显微藻类等在内的一大类生物群体，它个体微小，与人类关系密切。涵盖了有益跟有害的众多种类，广泛涉及
食品、医药、工农业、环保、体育等诸多领域。在我国教科书中，将微生物划分为以下8大类：细菌、病毒、真菌、放线菌、立克次氏体、支原体、衣
原体、螺旋体。有些微生物是肉眼可以看见的，像属于真菌的蘑菇、灵芝、香菇等。还有微生物是一类由核酸和蛋白质等少数几种成分组成的“非细
胞生物”，但是它的生存必须依赖于活细胞。
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>森林</h1>
森林是以木本植物为主体的生物群落，是集中的乔木与其它植物、动物、微生物和土壤之间相互依存相互制约，并与环境相互影响，从而形成的一个生
态系统的总体。它具有丰富的物种，复杂的结构，多种多样的功能。森林被誉为“地球之肺”。
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>草原</h1>
草原是地球生态系统的一种，分为热带草原、温带草原等多种类型，是地球上分布最广的植被类型。
草原的形成原因是土壤层薄或降水量少，草本植物受影响小，使植物无法广泛生长。
中国是世界上草原资源最丰富的国家之一，草原总面积将近4亿公顷，占全国土地总面积的40%，为现有耕地面积的3倍。
</div>
<div id="section43" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>湖泊</h1>
湖盆及其承纳的水体。湖盆是地表相对封闭可蓄水的天然洼池。湖泊按成因可分为构造湖、火山口湖、冰川湖、
堰塞湖、喀斯特湖、河成湖、风成湖、海成湖和人工湖（水库）等。按泄水情况可分为外流湖（吞吐湖）和内陆湖；
按湖水含盐度可分为淡水湖（含盐度小于1g/L）、咸水湖（含盐度为1-35g/L）和盐湖（含盐度大于35g/L）。
湖水的来源是降水、地面径流、地下水，有的则来自冰雪融水。湖水的消耗主要是蒸发、渗漏、排泄和开发利用。
</div>
</body>
</html>
<head>部分是引入一些文件，要注意引入的文件要遵循严格的顺序，不能随意改动
<body>前半部分用到的是BootStrap的导航组件，后半部分是内容部分。
（2）效果演示
2、轮播图
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1.jpg">
</div>
<div class="carousel-item">
<img src="../img/2.jpg">
</div>
<div class="carousel-item">
<img src="../img/3.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
分为三部分内容，其中左右切换按钮可以切换图片，提示符指示出是第几张图片在显示。
后面还有其他内容，这里不再一一列举，可以访问BootStrap中文网详细学习其他插件（https://v3.bootcss.com/javascript/#collapse）
标签：草原,BootStrap,植物,动物,微生物,含盐度,组件 来源： https://www.cnblogs.com/zhai1997/p/12240171.html