18. BootStrap 卡片组件Cards （2）

卡片导航

这里要配合 .nav 暂时也没讲 跟着做即可：

<!--这里要配合 .nav 暂时也没讲 跟着做即可：-->
<div class="card" style=" 500px;">
    <div class="card-header">
        <ul class="card-header-tabs nav nav-tabs">
            <li class="nav-item" > <a class="nav-link active" href="#">    Home </a></li>
            <li class="nav-item" > <a class="nav-link" href="#"> Content </a></li>
            <li class="nav-item" > <a class="nav-link disabled" href="#"> About   </a></li>
        </ul>
    </div>

    <div class="card-body">
        内容
    </div>
</div>

<!--讲解：
card-header-tabs：做一个头部水平列表的导航【去除头部本有的分隔线】
nav：导航基类    nav-tabs：导航样式【加正方形外框】
nav-item： 导航项目  nav-link：导航链接【不加没效果】
active：nav导航选中状态    disabled：nav导航禁止状态

所以你可以自己去去掉 然后看看样式即可
-->

card-header-tabs：做一个头部水平列表的导航【去除头部本有的分隔线】
nav：导航基类 nav-tabs：导航样式【加正方形外框】
nav-item： 导航项目 nav-link：导航链接【不加没效果】
active：nav导航选中状态 disabled：nav导航禁止状态

！还有另一种样式：

<!--另一种样式： 在上面的基础上改两个地方：
1.card-header-tabs      ->  card-header-pills
2.nav-tabs              ->  nav-pills
-->
<div class="card" style=" 500px;">
    <div class="card-header">
        <ul class="nav card-header-pills  nav-pills">
            <li class="nav-item" > <a class="nav-link active" href="#">    Home </a></li>
            <li class="nav-item" > <a class="nav-link" href="#"> Content </a></li>
            <li class="nav-item" > <a class="nav-link disabled" href="#"> About   </a></li>
        </ul>
    </div>

    <div class="card-body">
        内容
    </div>
</div>

图片做背景 然后写文字 ：

图片：card-img-overlay

文字：card-img-overlay

例：

<!--最简单的 图片做背景 然后写文字-->
<div class="card w-25 text-center text-white">
    <img src="1.jpg" class="card-img card-img-overlay" alt="">
    <div class="card-img-overlay">To:<br>开学健康 | 学习进步</div>
</div>

栅格布局 + 卡片图片  =  l图 r字  或  l字 r图

<div class="card text-info bg-info">
    <div class="row">
        <div class="col-6"><img class="card-img" src="1.jpg" ></div>
        <div class="col-6 text-warning"><h2 class="card-title">文 本 标 题</h2><p class=" card-text">Luckily, unless you really do intend for the evaluated code to have access to local variables (in which case you're probably doing something wrong!), you can achieve the same effect in one of two ways:</p></div>
    </div>
</div>

注意看 结构的 Class  缺一不可！！！！

卡片还可以合并组：

用.card-group 就可以对多个卡片合并组： 合并组的话 他会根据行的内容来塞入 和Flex差不多，然后的话也有和

Flex布局一样的 就是两边靠边 中间有隔开那种（card-deck）

例：（普通组合）

<div class="card text-info bg-info">
    <div class="row">
        <div class="col-6"><img class="card-img" src="1.jpg" ></div>
        <div class="col-6 text-warning"><h2 class="card-title">文 本 标 题</h2><p class=" card-text">Luckily, unless you really do intend for the evaluated code to have access to local variables (in which case you're probably doing something wrong!), you can achieve the same effect in one of two ways:</p></div>
    </div>
</div>

<!--下面开始 卡片组合：-->
<div class="card-group">
<!---------------------------------------------------------------->
<div class="card w-25 text-center">
    <div class="card-body">
        <img src="1.jpg" class="card-img">
    </div>
    <div class="card-footer">
        &copy;BiHu集团版权所有
    </div>
</div>
<!---------------------------------------------------------------->

<div class="card w-25 text-center">
    <div class="card-body">
        <img src="1.jpg" class="card-img">
    </div>
    <div class="card-footer">
        &copy;BiHu集团版权所有
    </div>
</div>
<!---------------------------------------------------------------->

<div class="card w-25 text-center">
    <div class="card-body">
        <img src="1.jpg" class="card-img">
    </div>
    <div class="card-footer">
        &copy;BiHu集团版权所有
    </div>
</div>
</div>

效果如下：

例：（两边靠边 之间隔开） 也是分组：

 你看 和上面的对比  之间有裂缝出现的，只需要吧 cark-group 改成 cark-deck 即可.


如果你要是想实现那种瀑布流的效果 那么你可以设置他的高即可，

OK卡片就讲到这里  我们主要还是挑重要的讲