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>

效果如下：