WEB前端第五十课——BootStrap组件（二）Card、Carousel

1.Card卡片

　　一个可以添加图像、标题、文本、列表、按钮等多种或一种内容的容器。

　　⑴ 基本样式

　　　　主要构成：

　　　　　　① 卡片容器，<div  class="card">

　　　　　　③ 图片，<img  class="card-img-top">，可以放在 body之前或之后

　　　　　　④ 卡片体，<div  class="card-body">，一个 card内可以多个 body

　　　　　　⑤ 卡片标题，<h5  class="card-title">

　　　　　　⑥ 卡片文本，<p  class="card-text">

　　　　　　⑦ 卡片连接，<a  class="btn btn-* ">，可以多个连接按钮或其他按钮

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

　　⑵ 添加列表组

　　　　卡片中可以根据需要添加列表组，即在卡片内部添加 ul>li列表

　　　　主要构成：

　　　　　　① 卡片容器，<div  class="card">

　　　　　　② 列表 ul，<ul  class="list-group  list-group-flush">

　　　　　　③ 列表 li，<li  class="list-group-item">

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

　　⑶ 页眉页脚

　　　　① 可根据需求在卡片内某个位置添加头部样式，示例如下：

　　　　　　<div class="card-header"> HeaderText </div>

　　　　　　“.card-header”也可以添加到<h*>标签或其他标签中。

　　　　② 可以在卡片内添加页脚样式，示例如下：

　　　　　　<div class="card-footer"> FooterText </div>

　　　　　　ps：可以向 card内的文本内容添加“.text-* ”字体样式或对齐样式。

　　⑷ 响应式卡片

　　　　可以根据需要将卡片包裹在栅格系统中，达到响应式需求。示例如下：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>

　　⑸ 卡片排版

　　　　① 卡片大小

　　　　　　卡片的宽度可以通过行内样式设置，如：style="width: 18rem;

　　　　　　也可以通过 BootStrap预置的尺寸类，如：class="w-25";

　　　　② 文本对齐

　　　　　　对卡片设置统一的对齐或字体样式，只需要在 card容器上定义“.text-* ”类即可。

　　　　③ 卡片背景色

　　　　　　通过定义 card容器的“.bg-* ”类设置卡片的背景颜色，如：bg-primary、bg-secondary等

　　　　④ 卡片边框

　　　　　　为 card容器定义“.border-* ”类设置卡片的边框样式，如：border-success、bg-danger等

　　　　⑤ 卡片字体

　　　　　　可以分别设置 card容器或 body的字体样式，如：text-white、text-muted、text-warning等

　　　　ps：卡片的页眉、页脚、卡片体都是可以分别设置不同字体、边框、背景等样式的。

　　⑹ 卡片导航

　　　　可以通过在卡片中添加导航条，实现选项卡的效果（配合 js代码切换 card-body内容）。

　　　　在 card-body前增加 ul列表（由 div包裹），

　　　　　　ul元素添加的类主要有三个：.nav， .nav-tabs， .card-header-tabs；

　　　　　　li元素添加的类主要有：.nav-item；

　　　　　　在内容元素中定义选项卡的活动状态。

　　　　<ul>除定义“ *-tabs”样式，还可定义其他样式，如：<ul class="nav nav-pills card-header-pills">

　　　　示例如下：

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

　　⑺ 图像覆盖

　　　　卡片中的图片可以作为文本内容的背景图片呈现，

　　　　此时基本样式中所说的 图片 和 卡片体 需要设置不同的类。

　　　　　　① 图片，<img  class="card-img">

　　　　　　② 卡片体，<div class="card-img-overlay">

　　　　示例如下：

<div class="card bg-dark text-white w-25">
    <img src="Images/stair.jpg" class="card-img" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text">Last updated 3 mins ago</p>
    </div>
</div>

　　⑻ 水平排列

　　　　通过将图像与文本内容分别放在响应式布局的容器中实现二者的水平方向排列。

<div class="card" style="max-width: 600px;">
    <div class="row no-gutters">
        <div class="col-md-4">
            <img src="Images/stair.jpg" class="card-img" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>

　　　　ps：在 .row类的div中增加了“.no-gutters”样式，作用是去掉 row的外边距和子选择器 col的内边距。

　　⑼ 卡片组

　　　　多个具有相同宽度和高度的卡片外部再嵌套一个组容器，就形成了卡片组。

　　　　　　class="card-group"，每个卡片紧挨在一起

　　　　　　class="card-deck"，每个卡片之间有间隔（也称为卡片甲板）

　　⑽ 其他

　　　　栅格卡片，可以控制每行最多显示的卡片数量

　　　　卡片列，可以类似于瀑布流布局卡片

2.轮播图

　　⑴ 基础框架

　　　　由4层构成：

　　　　① 外层容器，整个轮播图所有控件的容器，

　　　　　　“.carousel”类为必须的轮播样式

　　　　　　“.slide”类定义滑动效果

　　　　　　data-ride="carousel"属性用于自启动轮播

　　　　　　“id”用于内部控件间调用

　　　　② 内部容器

　　　　　　用于包裹轮播图主体内容

　　　　　　class="carousel-inner"

　　　　③ 图片容器

　　　　　　用于包裹 img图像

　　　　　　class="carousel-item active"

　　　　④ img图像

　　　　　　class="d-block w-25"，定义为块级元素，设置大小样式

　　示例如下：

    <div id="carouselExample" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="Images/rotation01.jpg" class="d-block w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="Images/rotation02.jpg" class="d-block w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="Images/rotation03.jpg" class="d-block w-25" alt="...">
            </div>
        </div>
    </div>

　　⑵ 在基础框架中还可以添加多种元素内容和轮播效果：

　　　　① 滑动按钮

　　　　　　使用<a>标签作为按钮容器

　　　　　　样式类，class="carousel-control-prev"，定义对应方向样式

　　　　　　链接，href="#carouselExample"，链接与外层容器“id”相同

　　　　　　属性，data-slide="prev"，定义滑动事件

　　　　　　按钮<span>，class="carousel-control-prev-icon"，定义按钮图标

　　　　② 锚点指示

　　　　　　使用 ol无序列表设置锚点标识

　　　　　　锚点<ol>，class="carousel-indicators"

　　　　　　锚点<li>target，data-target="#carouselExample"，与外层容器“id”相同

　　　　　　锚点<li>属性，data-slide-to="0"，关联对应图片的索引位置

　　　　　　锚点<li>类，class="active"，定义加载页面是的活动状态

　　　　③ 图片描述

　　　　　　在图片容器中添加 div文本容器

　　　　　　class="carousel-caption d-none d-md-block"

　　　　④ 淡入淡出

　　　　　　直接在外层容器添加“.carousel-fade”类即可

　　　　⑤ 自动轮播

　　　　　　给图片容器 div添加 data-interval="timeValue"属性

　　示例如下：

    <div id="carouselExample" class="carousel slide w-25 carousel-fade" data-ride="carousel">
<!--    轮播图锚点指示器    -->
        <ol class="carousel-indicators">
            <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExample" data-slide-to="1"></li>
            <li data-target="#carouselExample" data-slide-to="2"></li>
        </ol>
<!--    轮播图主体图片    -->
        <div class="carousel-inner">
            <div class="carousel-item active" data-interval="1000">
                <img src="Images/rotation01.jpg" class="d-block" alt="...">
<!--            轮播图片文本描述    -->
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="carousel-item" data-interval="2000">
                <img src="Images/rotation02.jpg" class="d-block" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="Images/rotation03.jpg" class="d-block" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
<!--    轮播图手动按钮    -->
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

 

参考资料来源：BootStrap中文网（https://v3.bootcss.com/）