淘先锋技术网

首页 1 2 3 4 5 6 7

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>

设置一个可以取消的报警提示
在这里插入图片描述