Bootstrap4——後續

1.表格也瘋狂

知識點
   th   表頭
   tr   行
   td   列

上代碼

<section class="bg-light text-center py-5">
    <h2> 今後計劃 </h2>
    <div class="container">
        <table class="table table-hover">
            <thead>
               <tr>
                   <th class="text-center"> 技術 </th>
                   <th class="text-center"> 遊戲 </th>
               </tr>
            </thead>
            <tbody>
                 <tr>
                     <td> Bootstrap4 </td>
                     <td> 龍珠英雄 </td>
                 </tr>
                 <tr>
                     <td> mysql </td>
                     <td> 閃電快打 </td>
                 </tr>
            </tbody>
        </table>
    </div>
</section>

效果圖

2.Tab菜單

<section class="py-5">
    <h2 class="text-center"> 我愛music </h2>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a href="#out" class="nav-link active" data-toggle="tab"> 國外 </a>
            </li>
            <li class="nav-item">
                <a href="#in" class="nav-link" data-toggle="tab"> 國內 </a>
            </li>
        </ul>
        <div class="tab-content py-3">
            <div id="out" class="tab-pane active">
                <p> 2019年泰勒-斯威夫特很漂亮 </p>
            </div>
            <div id="in" class="tab-pane">
                <p> 2019年鄧紫棋很美 </p>
            </div>
        </div>
    </div>
</section>

菜單欄設置 active爲默認顯示，默認爲國外，根據點擊顯示

3.製作頁腳

<section class="bg-light text-center py-4">
    <a href="//www.csdn.net" target="_blank" class="btn btn-primary btn-lg"> csdn學習區 </a>
    <a href="//www.4399.com" target="_self" class="btn btn-primary btn-lg"> 4399小遊戲 </a>
</section>
<footer class="text-center text-muted py-4">
      哈哈哈哈嗝, you belong with me
</footer>

target=_blank 指鏈接在新窗口打開
target=_self 指鏈接在原窗口打開
text-muted 顯示灰色字體
footer頁腳一般用於版權聲明

4.製作提示框

<section class="py-5">
    <h2 class="text-center"> 我愛Music</h2>
    <div class="container">
        <ul  class="nav nav-tabs">
            <li class="nav-item">
                <a href="#out" class="nav-link active" data-toggle="tab"> 國外 </a>
            </li>
            <li class="nav-item">
                <a href="#in" class="nav-link" data-toggle="tab"> 國內 </a>
            </li>
        </ul>
        
        <div class="tab-content py-3">
            <div id="out" class="tab-pane active">
                <p> 2019年最美歌手是
                    <span class="font-weight-bold text-success" title="泰勒最美"
                    data-toggle="tooltip" data-placement="top"> 黴黴 </span> 還是 
                    <span class="font-weight-bold text-danger" title="鄧紫棋最美"
                    data-toggle="tooltip" data-placement="bottom"> 鄧紫棋 </span> ？會是鄧紫棋嗎 
                </p>
            </div>
            <div id="in" class="tab-pane">
                <p> 絕對是佟麗婭了，不過黃小姐也不錯 </p>
            </div>
        </div>
    
    </div>
</section>
<script>
    $(function () {
        'use strict';
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

菜單擴展顯示

span標籤中 title爲提示框內容
data-placement=top 提示框在上方
data-placement=bottom 提示框在下方

5.製作導航條

知識點
   nav
   navbar

代碼
注意：body包含 header，main，footer

<header>
    <div class="container">
        <nav class="navbar navbar-expand navbar-light">
            <a href="#" class="navbar-brand"> Youku</a>
            <ul class="navbar-nav">
                <li class="nav-item"><a href="#" class="nav-link"> Tkh </a></li>
                <li class="nav-item"><a href="#" class="nav-link"> Ybd </a></li>
                <li class="nav-item"><a href="#" class="nav-link"> Yjzz </a></li>
            </ul>
        </nav>
    </div>
</header>

6.製作漢堡菜單

適應各種屏幕大小
當屏幕小的時候會收縮在漢堡裏

<header>
    <div class="container">
        <nav class="navbar navbar-expand-sm navbar-light">
            <a href="#" class="navbar-brand"> Youku</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="menu" class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link"> Tkh </a></li>
                    <li class="nav-item"><a href="#" class="nav-link"> Ybd </a></li>
                    <li class="nav-item"><a href="#" class="nav-link"> Yjzz </a></li>
                </ul>
            </div>
        </nav>
    </div>
</header>

data-toggler=‘collapse’ 設置可收縮，button爲選擇按鈕
通過 id 來控制匹配選擇。
在屏幕大於 sm標準時和上圖一樣，小於時如下

7.報警提示

知識點
   alert
   alert-*
   close
   data-dismiss='alert'

上代碼

<header>
    <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show">
        結束啦，捨不得你哦
        <button class="close" data-dismiss="alert">&times;</button>
    </div>
</header>