bootstrap 4-标签页制作和弹出框（模态框）制作

1、标签页（Tabs）

标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间。

如下：

无需写任何JavaScript代码，只需要简单的为页面元素指定data-toggle="tab",为url添加nav和nav-tab class 

案例代码：

<!--标签-->
<ul class="nav nav-tabs" role="tablist">
	<li class="active">
		<a href="tab-chrome" role="tab" data-toggle="tab">Chrome</a>
	</li>
	<li>
		<a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a>
	</li>
	<li>
		<a href="#tab-safari" role="tab" data-toggle="tab">Safari</a>
	</li>
	<li>
		<a href="#tab-opera" role="tab" data-toggle="tab">Opera</a>
	</li>
	<li>
		<a href="#tab-ie" role="tab" data-toggle="tab">IE</a>
	</li>
</ul>
<!--标签的内容-->
<div class="tab-content">
	<div class="tab-pane active" id="tab-chrome">
	  <div class="col-md-7">
		<h1>chrome</h1>
		<p>Google Chrome,又称chrome浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
	  </div>
	</div>
	<div class="tab-pane" id="tab-firefox">
		<h1>firefox</h1>
		<p>firefox,又称firefox浏览器，是一个由firefox（谷歌）公司开发的网页浏览器。</p>
	</div>
	<div class="tab-pane" id="tab-safari">
		<h1>safari</h1>
		<p>safari,又称safari浏览器，是一个由safari（谷歌）公司开发的网页浏览器。</p>
	</div>
	<div class="tab-pane" id="tab-opera">
		<h1>Opera</h1>
		<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
	</div>
	<div class="tab-pane" id="tab-ie">
		<h1>ie</h1>
		<p>ie,又称Google浏览器，是一个由ie（谷歌）公司开发的网页浏览器。</p>
	</div>
</div>

效果如下

2、弹出框（模态框）Modal

弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单等内容

代码：

<div class="modal fade" id="about">
	<div class="modal-dialog">
		<div class="modal-content">
			<!-- 头部 -->
			<div class="modal-header"> 
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">关于</h4>
			</div>
			<!-- 内容 -->
			<div class="modal-body">
				我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标
			</div>
			<!-- 尾部 -->
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
			</div>
		</div>
	</div>
</div>

效果如下：