10-Bootstrap 4 的新增组件—旋转器和卡片

Bootstrap 4 的新增组件—旋转器和卡片

旋转器特效

定义旋转器

Bootstrap Spinner 是一种用来显示加载状态的动画组件。可以通过添加 .spinner-border 或 .spinner-grow 类来创建不同样式的旋转器。

</head>
<body>
<h3 class="mb-4">旋转器颜色</h3>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-light"></div>
<div class="spinner-border text-dark"></div>
<h3 class="my-4">渐变缩放颜色</h3>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-light"></div>
<div class="spinner-grow text-dark"></div>

<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

设计旋转器风格

颜色：通过 text-* 类可以更改旋转器的颜色。

大小：通过添加 .spinner-border-sm 或使用 style="width: 3rem; height: 3rem;" 自定义大小。

</head>
<body>
<h3 class="mb-4">设置旋转器的大小</h3>
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm ml-5"></div>
<hr>
<h2 class="mb-3">自定义旋转器的大小</h2>
<div class="spinner-border" style="width: 3rem;height: 3rem;"></div>
<div class="spinner-grow ml-5" style="width: 3rem;height: 3rem;"></div>

对齐旋转器

可以通过 Bootstrap 的 text-center, d-flex, justify-content-center 等类来控制旋转器的对齐方式。

</head>
<body>
<h3 class="mb-4">居中对齐</h3>
<div class="d-flex justify-content-center">
<div class="spinner-border"></div>
</div>
<hr>
<h3 class="my-4">右对齐</h3>
<div class="d-flex justify-content-center">
<div class="spinner-border ml-auto"></div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

使用浮动设置右对齐

</head>
<body>
<h3 class="mb-4">右对齐</h3>
<div class="clearfix">
<div class="spinner-border float-right"></div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

使用文本类

</head>
<body>
<h3 class="mb-4">居中对齐</h3>
<div class="text-center">
<div class="spinner-border"></div>
</div>
<br>
<h3 class="mb-4">右对齐</h3>
<div class="text-right">
<div class="spinner-border"></div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

按钮旋转器

可以将旋转器嵌入到按钮中，显示加载中的状态。

</head>
<body>
<h3 class="mb-4">按钮旋转器</h3>
<button class="btn btn-danger" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-danger" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
loading…
</button>
<hr>
<button class="btn btn-danger" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
</button>
<button class="btn btn-danger" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
loading…
</button>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

卡片

定义卡片

Card 是 Bootstrap 4 中的一个多功能组件，常用于显示内容块。基本的卡片由 .card 类定义。

</head>
<body>
<h3 class="mb-4">卡片</h3>
<div class="card" style="width: 30rem">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">内容</p>
<a href="#" class="btn btn-primary">链接按钮</a>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

卡片的内容类型

卡片可以包含多种内容类型：标题、文本、列表、图片、链接等。

卡片的主体

</head>
<body>
<h3 class="mb-4">卡片的主题</h3>
<div class="card">
<div class="card-body">
这是卡片主题中的一些文本
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

卡片的标题、文本和链接

</head>
<body>
<h3 class="mb-4">卡片的主题，文本和链接</h3>
<div class="card" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">卡片的标题</h5>
<h6 class="card-subtitle mb-2 text-muted">卡片的副标题</h6>
<p class="card-text">卡片包含标题，副标题，链接和文本内容。</p>
<a href="#" class="card-link">卡片的链接1</a>
<a href="#" class="card-link">卡片的链接2</a>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

卡片中的图像

</head>
<body>
<h3 class="mb-4">卡片中的图像</h3>
<div class="card float-left" style="width: 25rem">
<img src="http://img2.imgtn.bdimg.com/it/u=3751153382,1396916542&fm=26&gp=0.jpg" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">跳交际舞的青少年人物</p>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

列表组

</head>
<body>
<h3 class="mb-4">列表组</h3>
<div class="card">
<div class="card-header">新闻类别</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">新闻列表一</li>
<li class="list-group-item">新闻列表二</li>
<li class="list-group-item">新闻列表三</li>
</ul>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

页眉和页脚

</head>
<body>
<h3 class="mb-4">页眉和页脚</h3>
<div class="card text-center">
<div class="card-header">诗歌欣赏</div>
<div class="card-body">
<h5 class="card-title">菩萨蛮•人人尽说江南好</h5>
<p class="card-text">人人尽说江南好，游人只合江南老。春水碧于天，画船听雨眠。垆边人似月，皓腕凝霜雪。未老莫还乡，还乡须断肠。</p>
<a href="#" class="btn btn-primary">诗歌分析</a>
</div>
<div class="card-footer">作者：韦庄</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

使用网格控制

</head>
<body class="container">
<h3 class="mb-4">使用网格布局控制卡片的宽度</h3>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header">头部</div>
<div class="card-body">主题</div>
<div class="card-footer">底部</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">头部</div>
<div class="card-body">主题</div>
<div class="card-footer">底部</div>
</div>
</div>
</div>
<!–引入js文件–>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!–Bootstrap核心JavaScript文件–>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

控制卡片的宽度

可以通过 style 属性直接控制卡片的宽度，或者使用 Bootstrap 的栅格系统来进行布局。

使用宽度类控制

</head>
<body class="container">
<h3 class="mb-4">使用宽度类来控制卡片的宽度</h3>
<div class="card w-50 mb-3">
<div class="card-body">卡片主题(w-50)</div>
</div>
<div class="card w-75 mb-3">
<div class="card-body">卡片主题(w-75)</div>
</div>
<div class="card w-100 mb-3">
<div class="card-body">卡片主题(w-100)</div>
</div>

使用css样式控制

</head>
<body class="container">
<h3 class="mb-4">使用css样式来控制卡片的宽度</h3>
<div class="card mb-3" style="width: 15rem">
<div class="card-body">卡片主题(15rem)</div>
</div>
<div class="card mb-3" style="width: 30rem">
<div class="card-body">卡片主题(30rem)</div>
</div>
<div class="card mb-3" style="width: 45rem">
<div class="card-body">卡片主题(45rem)</div>
</div>

文本对齐方式

通过 text-center, text-left, text-right 等类可以控制卡片内文本的对齐方式。

</head>
<body class="container">
<h3 class="mb-4">文本的对齐方式</h3>
<h4>居中对齐</h4>
<div class="card text-center">
<div class="card-header">页眉</div>
<div class="card-body">卡片的主体</div>
<div class="card-footer">页脚</div>
</div>

添加导航

可以在卡片内添加导航条，实现选项卡式的内容展示。

</head>
<body class="container">
<h3 class="mb-4">添加标签导航</h3>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" id="home-table" data-toggle="tab" href="#nav1">电影</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-table" data-toggle="tab" href="#nav2">电视剧</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-table" data-toggle="tab" href="#nav3">动漫</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane fade show active" id="nav1">
<div class="card-body">
<h5 class="card-title">电影</h5>
<p class="card-text"><input type="text" class="form-control"></p>
<a href="#" class="btn btn-primary">搜索</a>
</div>
</div>
<div class="tab-pane fade show" id="nav2">
<div class="card-body">
<h5 class="card-title">电视剧</h5>
<p class="card-text"><input type="text" class="form-control"></p>
<a href="#" class="btn btn-primary">搜索</a>
</div>
</div>
<div class="tab-pane fade show" id="nav3">
<div class="card-body">
<h5 class="card-title">动漫</h5>
<p class="card-text"><input type="text" class="form-control"></p>
<a href="#" class="btn btn-primary">搜索</a>
</div>
</div>
</div>
</div>

图像背景

卡片可以将图片作为背景，并叠加内容。

</head>
<body class="container">
<h3 class="mb-4">图像背景</h3>
<div class="card bg-dark text-white">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2311641753,3379985723&fm=26&gp=0.jpg" alt="" class="card-img">
<div class="card-img-overlay">
<h5 class="card-title">雄鹰</h5>
<p class="card-text">相当雄鹰，不是为了自由飞翔的快乐，而是为了那份搏击蓝天的勇气。</p>
</div>
</div>

卡片风格

可以使用不同的类如 .card-primary, .card-success 等来改变卡片的风格。

背景颜色

</head>
<body class="container">
<h3 class="mb-4">卡片的背景颜色</h3>
<div class="card text-white bg-primary mb-3">
<div class="card-header">主卡标头</div>
</div>
<div class="card text-white bg-secondary mb-3">
<div class="card-header">副卡标头</div>
</div>
<div class="card text-white bg-success mb-3">
<div class="card-header">成功卡标头</div>
</div>
<div class="card text-white bg-danger mb-3">
<div class="card-header">危险卡标头</div>
</div>
<div class="card text-white bg-warning mb-3">
<div class="card-header">警告卡标头</div>
</div>
<div class="card text-white bg-info mb-3">
<div class="card-header">信息卡标头</div>
</div>
<div class="card text-dark bg-light mb-3">
<div class="card-header">光卡标头</div>
</div>
<div class="card text-white bg-dark mb-3">
<div class="card-header">暗卡标头</div>
</div>

边框颜色

</head>
<body class="container">
<h3 class="mb-4">卡片的边框颜色</h3>
<div class="card border-primary mb-3">
<div class="card-header text-primary">Header</div>
</div>
<div class="card border-secondary mb-3">
<div class="card-header text-secondary">Header</div>
</div>
<div class="card border-success mb-3">
<div class="card-header text-success">Header</div>
</div>
<div class="card border-danger mb-3">
<div class="card-header text-danger">Header</div>
</div>
<div class="card border-warning mb-3">
<div class="card-header text-warning">Header</div>
</div>
<div class="card border-info mb-3">
<div class="card-header text-info">Header</div>
</div>
<div class="card border-light mb-3">
<div class="card-header text-dark">Header</div>
</div>
<div class="card border-dark mb-3">
<div class="card-header text-dark">Header</div>
</div>

设计样式

</head>
<body class="container">
<h3 class="mb-4">设计样式</h3>
<div class="card border-success mb-3" style="max-width: 25rem">
<div class="card-header bg-transparent border-success text-center">作文</div>
<div class="card-body text-success">
<h5 class="card-title">雄鹰</h5>
<p class="card-text">对于雄鹰而言，天上的风再大，也只是锻炼翅膀的机会而已。</p>
</div>
<div class="card-footer bg-transparent border-success text-center">小明</div>
</div>

卡片排版

可以通过栅格系统将卡片排版为多列布局，使用 .col 类来实现。

卡片组

</head>
<body class="container">
<h3 class="mb-4">卡片组</h3>
<div class="card-group">
<div class="card">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547718760,1213518458&fm=26&gp=0.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">雄鹰</h5>
<p class="card-text">天空雄鹰，没人鼓掌，也在飞翔；深山野花，没人欣赏，也在芬芳。</p>
</div>
<div class="card-footer">
<small>卡片组中页脚会自动对齐</small>
</div>
</div>
<div class="card">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547718760,1213518458&fm=26&gp=0.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">雄鹰</h5>
<p class="card-text">如果你想像雄鹰一样翱翔天空，那你就要和雄鹰一起飞翔，而不要与燕为伍。</p>
</div>
<div class="card-footer">
<small>卡片组中页脚会自动对齐</small>
</div>
</div>
<div class="card">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547718760,1213518458&fm=26&gp=0.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">雄鹰</h5>
<p class="card-text">想要在知识的天空中摘星吉月，探索宝藏，就要像雄鹰那样顽强，搏击风云，振翅翱翔！</p>
</div>
<div class="card-footer">
<small>卡片组中页脚会自动对齐</small>
</div>
</div>
</div>

卡片阵列

</head>
<body class="container">
<h3 class="mb-4">卡片阵列</h3>
<div class="card-deck">
<div class="card">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547718760,1213518458&fm=26&gp=0.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">雄鹰</h5>
<p class="card-text">天空雄鹰，没人鼓掌，也在飞翔；深山野花，没人欣赏，也在芬芳。</p>
</div>
<div class="card-footer">
<small>卡片组中页脚会自动对齐</small>
</div>
</div>
<div class="card">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547718760,1213518458&fm=26&gp=0.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">雄鹰</h5>
<p class="card-text">如果你想像雄鹰一样翱翔天空，那你就要和雄鹰一起飞翔，而不要与燕为伍。</p>
</div>
<div class="card-footer">
<small>卡片组中页脚会自动对齐</small>
</div>
</div>
<div class="card">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547718760,1213518458&fm=26&gp=0.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">雄鹰</h5>
<p class="card-text">想要在知识的天空中摘星吉月，探索宝藏，就要像雄鹰那样顽强，搏击风云，振翅翱翔！</p>
</div>
<div class="card-footer">
<small>卡片组中页脚会自动对齐</small>
</div>
</div>
</div>

多列卡片浮动排版

</head>
<body class="container">
<h3 class="mb-4">卡片列</h3>
<div class="card-columns">
<div class="card bg-primary p-3">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" class="card-img-top" alt="">
</div>
<div class="card bg-dark p-3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136450&di=383a697fe84e0bdf70bc5961d8f43a8d&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg" class="card-img-top" alt="">
</div>
<div class="card bg-info p-3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136450&di=c16fcf8aa8f00aa885828746196ace9f&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg" class="card-img-top" alt="">
</div>
<div class="card bg-light p-3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136450&di=ae7d1c3e776315c51f3655c1b7e4eff5&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg" class="card-img-top" alt="">
</div>
<div class="card bg-warning p-3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136450&di=3a6fcd999f3061e01f55f1d73d8dc113&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F27%2F10%2F01300000324235124757108108752.jpg" class="card-img-top" alt="">
</div>
<div class="card bg-danger p-3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136449&di=32cfa6d2775ae32d8f887c88133b039f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F68%2F61%2F300000839764127060614318218_950.jpg" class="card-img-top" alt="">
</div>
<div class="card bg-secondary p-3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671176807&di=5a0cb0e2deb1773f78442d2444cfc86d&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D3984473917%2C238095211%26fm%3D214%26gp%3D0.jpg" class="card-img-top" alt="">
</div>
<div class="card bg-success p-3">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136449&di=cb600a99414969d3743b96be8d2de659&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F5366d0160924ab1857f1cbae35fae6cd7a890b47.jpg" class="card-img-top" alt="">
</div>
</div>

案例实训1—仿云巴网站

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>Bootstrap 4的新增组件——旋转器和卡片</title>
<!– Bootstrap核心css文件–>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.color1{
color: #00adee;
}
.size{
font-size: 20px;
}
.line{
border-bottom: 2px solid #00adee;
width: 100px;
margin: auto;
}
.card-header{
background: #00ceef;
color: white;
}
.color2{
background: #e4e4e4;
color: #13082b;
}
.card-body img{
margin-bottom: 30px;
}
.card-body p{
font-size: 18px;
}
.row h4{
font-weight: 900;
}
.card{
min-height: 400px;
}
.card{
transition: text-shadow 3s linear;
}
.card:hover{
box-shadow: 3px 3px 20px 0 #a4b9b4,-3px -3px 20px 0 #a4b9b4;
}
</style>
</head>
<body class="container">
<h2 class="color1 text-center">云巴示例和案例</h2>
<div class="line"></div>
<p class="text-center my-2 size">我们为移动应用以及智能设备开发提供后端服务，助你打造最佳实时应用</p>
<div class="row">
<div class="col-md-4">
<div class="card mb-4 text-center">
<div class="card-header"><h4>视频直播互动</h4></div>
<div class="card-body">
<img src="http://img5.imgtn.bdimg.com/it/u=2029597372,1520689243&fm=26&gp=0.jpg" class="w-75" alt="">
<p class="card-text">借助云巴的第三方直播互动技术，直播平台可快速实现弹幕，打赏，点赞，点爱心等直播互动功能。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 text-center">
<div class="card-header color2"><h4>掌阅iReader</h4></div>
<div class="card-body">
<img src="http://img5.imgtn.bdimg.com/it/u=3316554837,488915588&fm=15&gp=0.jpg" class="w-75" alt="">
<p class="card-text">用户量大对公司来说是一件好事，然而，巨大的用户量也给iReader后端处理带来了麻烦。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 text-center">
<div class="card-header"><h4>即时通信</h4></div>
<div class="card-body">
<img src="http://img.ui.cn/data/file/9/5/4/702459.png" class="w-75" alt="">
<p class="card-text">随着移动互联网的发展，社交需求场景不再局限于qq,微信等个人聊天工具</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 text-center">
<div class="card-header"><h4>共享单车</h4></div>
<div class="card-body">
<img src="http://blog.mydrivers.com/img/20170904/s_caff385cee4f42d8ada305c6dbd559e2.png" class="w-75" alt="">
<p class="card-text">使用云巴SDK的云巴共享单车锁，采用GPS定位，用户可通过蓝牙+GPRS扫码开锁。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 text-center">
<div class="card-header color2"><h4>智能门锁</h4></div>
<div class="card-body">
<img src="http://y3.ifengimg.com/a/2015_33/dfc2be18ff87ffd.jpg" class="w-75" alt="">
<p class="card-text">云巴智能蓝牙门锁一站式解决方案。</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 text-center">
<div class="card-header"><h4>智能车位锁</h4></div>
<div class="card-body">
<img src="http://img2.imgtn.bdimg.com/it/u=432679038,2716987874&fm=26&gp=0.jpg" class="w-75" alt="">
<p class="card-text">云巴共享车位方案包含智能车位锁，APP开发，电子控制系统，提供一站式解决方案。</p>
</div>
</div>
</div>
</div>

案例实训2—动态进度条及百分比数字显示

.wrapper {
width: 350px;
margin: 200px auto;
}

.wrapper .load-bar {
width: 100%;
height: 25px;
border-radius: 30px;
background: #dcdbd7;
position: relative;
}

.wrapper .load-bar-inner {
height: 99%;
width: 0;
border-radius: inherit;
position: relative;
background: #c2d7ac;
animation: loader 10s linear infinite;
}

@keyframes loader {
from {
width: 0%;
}
to {
width: 100%
}
}

.wrapper #counter {
position: absolute;
background: #eeeff3;
background: linear-gradient(#eeeff3, #cbcbd3);
padding: 5px 10px;
border-radius: 0.4em;
left: -25px;
top: -50px;
font-size: 12px;
font-weight: bold;
width: 44px;
animation: counter 10s linear infinite;
}

.wrapper #counter:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #cbcbd3;
transform: rotate(45deg);
left: 50%;
margin-left: -4px;
bottom: -4px;
border-radius: 0 0 3px 0;
}

@keyframes counter {
from {
left: -25px
}
to {
left: 323px
}
}

.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {
animation-play-state: paused;
}
.wrapper h1{
font-size: 28px;
padding: 20px 0 8px 0;
}
.wrapper p{
font-size: 13px;
}
</style>
</head>
<body class="container">
<div class="wrapper">
<div class="load-bar">
<div class="load-bar-inner">
<span id="counter"></span>
</div>
</div>
<h1 class="text-center"><span class="spinner-border mr-4"></span>Loading…</h1>
</div>

//定义increment()方法
function increment() {
// 定时器每调用一次，自增一
current ++;
// 设置指示器的内容
$('#counter').html(current + '%');
// 当current变量值为100时重置
if (current == 100){current = 0;}
}
// 当鼠标悬浮在Load-bar上时，清除定时器
$('.load-bar').mouseover(function () {
clearInterval(interval);
})
// 当鼠标移开load-bar时，启动定时器
.mouseout(function () {
interval = setInterval(increment,100);
})
})
</script>
</body>
</html>