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>

效果如下：