浅谈对Bootstrap的看法之二（下拉菜单、动态选项卡、折叠导航栏、轮播图、模态框）

1.下拉菜单

相关说明：下拉菜单对应.dropdown 类，我们可以使用button按钮或a链接来打开下拉菜单，需要添加class="dropdown-toggle" 和 data-toggle="dropdown" 属性。

主要代码：

<div class="dropdown">
		    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		      HTML
		    </button>
		    <div class="dropdown-menu">
		      <a class="dropdown-item" href="#">HTML 教程</a>
		      <a class="dropdown-item" href="#">HTML 简介</a>
		      <a class="dropdown-item" href="#">HTML 基础</a>
		    </div>
		    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		      CSS
		    </button>
		    <div class="dropdown-menu">
		      <a class="dropdown-item" href="#">CSS 教程</a>
		      <a class="dropdown-item" href="#">CSS 简介</a>
		      <a class="dropdown-item" href="#">CSS 基础</a>
		    </div>
		    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
		      JAVASCRIPT
		    </button>
		    <div class="dropdown-menu">
		      <a class="dropdown-item" href="#">JS 教程</a>
		      <a class="dropdown-item" href="#">JS 简介</a>
		      <a class="dropdown-item" href="#">JS 基础</a>
		    </div>
  		</div>

2.动态选项卡

相关说明：动态选项卡是由导航演变而来，对应.nav-tabs类。我们可以在每个链接上添加data-toggle="tab" 属性， 然后在每个链接选项对应的内容的上添加class="tab-pane"类。

主要代码：

<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">Home</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
			</li>
		</ul>
		<!-- Tab panes -->
		<div class="tab-content">
			<div id="home" class="container tab-pane active"><br>
				<h3>HTML</h3>
				<p>超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。</p>
			</div>
			<div id="menu1" class="container tab-pane fade"><br>
				<h3>CSS</h3>
				<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
			</div>
			<div id="menu2" class="container tab-pane fade"><br>
				<h3>JS</h3>
				<p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。</p>
			</div>
		</div>

3.折叠导航栏

相关说明：折叠导航栏是导航栏变化得到的一种，可以自适应小屏幕，在小屏幕上将导航栏自动折叠成按钮，通过点击按钮来显示导航选项。

要创建折叠导航栏，可以在按钮上添加 class="navbar-toggle", data-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id（thetarget）。

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
			<a class="navbar-brand" href="#">Navbar</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="collapsibleNavbar">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#">Link1</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link2</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link3</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link4</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link5</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link6</a>
					</li>    
				</ul>
			</div>  
		</nav>

4.轮播图

相关说明：轮播是一个循环的幻灯片，通常放在网页的导航栏下。

主要代码：

<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="http://static.runoob.com/images/mix/img_fjords_wide.jpg" style="width: 100%">
				</div>
				<div class="carousel-item">
					<img src="http://static.runoob.com/images/mix/img_nature_wide.jpg" style="width: 100%">
				</div>
				<div class="carousel-item">
					<img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg" style="width: 100%">
				</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>

5.模态框

相关说明：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可提供信息交互等。

主要代码：

<h2>模态框实例</h2>
		<!-- 按钮：用于打开模态框 -->
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
			打开模态框
		</button>

		<!-- 模态框 -->
		<div class="modal fade" id="myModal">
			<div class="modal-dialog">
				<div class="modal-content">

					<!-- 模态框头部 -->
					<div class="modal-header">
						<h4 class="modal-title">模态框头部</h4>
						<button type="button" class="close" data-dismiss="modal">×</button>
					</div>

					<!-- 模态框主体 -->
					<div class="modal-body">
						模态框内容..
					</div>

					<!-- 模态框底部 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					</div>

				</div>
			</div>