? ? ? ?今天我要介紹的是在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 -->

?展示：

點擊后變化：

注：注意以下代碼，是生效以上效果的重要點：

<!-- 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中輪播圖以及切換行為（手風琴）不見不散。