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"><span
								aria-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 -->

 展示：

点击后变化：

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

<!-- fade: 隐藏-->
 <!-- show:显示 -->    《==弹框显示的重要区块
 <div id="myModal" class="modal fade">

---

</div><!-- /.modal-content -->

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

如：

<!-- 头部 -->
    <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-dialog -->

：  模态框的内容

如：

<!-- 身体：modal-body -->
<div class="modal-body">
模态框内容区域模态框内容区域模态框内容区域模态框内容区域
<!-- 不仅仅只放置内容区域，可以是表格或其他 -->

-------------------------------------------------------------------------------------------------------------------------
</div><!-- /.modal -->

：  模态框的对话框以及整个模态框本身

追加：

<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属于第一个窗口。第一个窗口打开第二个（意为弹出第二个）

展示：

点击后变化：

方法：只需要将==》

原内容：

<!-- 身体：modal-body -->
                    <div class="modal-body">
                        模态框内容区域模态框内容区域模态框内容区域模态框内容区域
                        <!-- 不仅仅只放置内容区域，可以是表格或其他 -->
                    </div>

---

变换：

<!-- 身体：modal-body -->
                    <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>

总结：希望本文有关于BootStrap首页排版（模态框和选项卡）的知识点内容能对你带来一定的帮助，同时非常感谢各位大佬的点赞与支持，咱们下一篇关于BootStrap中轮播图以及切换行为（手风琴）不见不散。