BootStrap:首页排版（其一）

今天我要介绍的是在BootStrap中有关于首页排版的内容知识点，即（模态框，选项卡）。

模态框：

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。

在运行前，先加入以下内容：

<!-- 引入bootstrap核心css文件 --><link rel="stylesheet" href="js/bootstrap-3.4.1-dist/css/bootstrap.css" /><!-- 引入jquery核心文件，顺序必须在bootstrap.js之前 --><script src="js/jquery-3.5.1.js"></script><!-- 引入bootstrap核心js文件 --><script src="js/bootstrap-3.4.1-dist/js/bootstrap.js"></script><!-- 相应式配置 --><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

模态框静态实例：

<h1>模态框</h1><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击这里</button><button class="btn btn-success" data-toggle="modal" data-target="#myModal2">打开另外一个</button><!-- fade: 隐藏--><!-- show:显示 --><div id="myModal" class="modal fade"><div class="modal-dialog"><!-- 内容 --><div class="modal-content"><!-- 头部 --><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><spanaria-hidden="true">&times;</span></button><h4 class="modal-title">模态框标题</h4></div><!-- 身体：modal-body --><div class="modal-body">模态框内容区域模态框内容区域模态框内容区域模态框内容区域<!-- 不仅仅只放置内容区域，可以是表格或其他 --></div><!-- 注脚：model footer --><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal -->

展示：

点击后变化：

注：注意以下代码，是生效以上效果的重要点：

《==弹框显示的重要区块
<div id="myModal" class="modal fade">

</div>

：这段注释是用来标记HTML代码中模态框（modal）的结束位置。模态框通常用来展示弹出式的内容，比如对话框、警告框或者表单等。

如：


<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><spanaria-hidden="true">×</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><button type="button" class="btn btn-primary">保存</button>
</div>

进阶内容

动态显示：

<h1>模态框</h1>
       <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
           点击这里

</button>

data-toggle="modal" 《==即将打开模态框"modal" 且模态框为固定的，而模态框代表：

<div id="myModal" class="modal fade"> #myModal《==>"modal"

注："modal" 管制#myModal；

</button>
       <button class="btn btn-success" data-toggle="modal" data-target="#myModal2">
           打开另外一个
       </button>

注：<div id="myModal2" class="modal fade"> ==》myModal2 属于第二个窗口。myModal属于第一个窗口。第一个窗口打开第二个（意为弹出第二个）

展示：

点击后变化：

方法：只需要将==》

原内容：

<div class="modal-body">
                       模态框内容区域模态框内容区域模态框内容区域模态框内容区域
                       
                   </div>

变换：


                   <div class="modal-body">
                       <form>
                           <div class="form-group">
                           <label for="recipient-name" class="control-label">Recipient:</label>
                               <input type="text" class="form-control" id="recipient-name">
                           </div>
                           <div class="form-group">
                               <label for="message-text" class="control-label">Message:</label>
                               <textarea class="form-control" id="message-text"></textarea>
                           </div>
                       </form>
                   </div>

释义：这样就不会互相干扰各自运转；

选项卡

通过快速、动态的选项卡功能，可以在本地内容的窗格之间进行切换，甚至可以通过下拉菜单实现。不支持嵌套选项卡。

选项卡实例：

<h1>选项卡（标签页）</h1><div><!-- Nav tabs --><!-- 标签 --><ul class="nav nav-tabs" ><!-- active表示被选中 --><li  class="active"><a href="#a1" aria-controls="home" role="tab" data-toggle="tab">首页</a></li><li ><a href="#a2" aria-controls="profile" role="tab" data-toggle="tab">配置文件</a></li><li ><a href="#a3" aria-controls="messages" role="tab" data-toggle="tab">未读消息</a></li><li ><a href="#a4" aria-controls="settings" role="tab" data-toggle="tab">我的设置</a></li></ul><!-- Tab panes --><!-- 标签对应的内容页 --><div class="tab-content"><div  class="tab-pane active" id="a1">首页区域</div><div  class="tab-pane" id="a2">文件配置区域</div><div  class="tab-pane" id="a3">未读消息区域</div><div  class="tab-pane" id="a4">我的设置区域</div></div></div>

展示：

注：方法解析：

以下内容解析：

<div><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li><li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li><li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li><li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li></ul><!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="home">...</div><div role="tabpanel" class="tab-pane" id="profile">...</div><div role="tabpanel" class="tab-pane" id="messages">...</div><div role="tabpanel" class="tab-pane" id="settings">...</div></div></div>

方法：

要来回切换标签页只需要：

<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

转化为：

<li class="active"><a href="#a1" aria-controls="home" role="tab" data-toggle="tab">首页</a></li>

注：只需要将前面的role="presentation" class="active">（开头标签页的active不用去掉，active意为激活，只需要激活第一个标签即可）

<href="#home">只需要将其设为简易内容即可，如a1,a2等，

示例：
原来内容：

<li ~~role="presentation" class="active"~~><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li ~~role="presentation"~~><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>

修改后内容：

<li class="active"><a href="#a1" aria-controls="home" role="tab" data-toggle="tab">首页</a></li>
<li ><a href="#a2" aria-controls="profile" role="tab" data-toggle="tab">配置文件</a></li>

<div role="tabpanel" class="tab-pane active" id="home">...</div>，只需要将role和id设为简易的内容即可。

示例：

原来内容：

<div ~~role="tabpanel"~~ class="tab-pane active" id="~~home~~">~~...~~</div>
<div ~~role="tabpanel"~~ class="tab-pane" id="~~profile~~">~~...~~</div>

修改后内容：

<div class="tab-pane active" id="a1">首页区域</div>
<div class="tab-pane" id="a2">文件配置区域</div>