您的位置：首页 > Web前端 > BootStrap

bootstrap组件（卡片）学习笔记

2020-04-22 15:56 821 查看

组件卡片介绍

bootstrap4前并没有卡片，使用的是面板一词。卡片是bootstrap4加入的，操作非常容易，重点要说的是卡片排版，我觉得非常有用，所以需要记录下，方便复习。

作用场景

在bootstrap4中卡片提供一套实用的样式，这套样式在网页中非常常见。

上图中图片与文字搭配的样式在网页中常见，bootstrap因此也提供了这样的css组件，方便攻城狮们快速开发，

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
<div class="container">
<div class="row">
<div class="col-3">
<div class="card">
<img class="card-img-top"
src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"
alt="">
<div class="card-body">
<p class="card-text">
这是一张图片
</p>
</div>
</div>
</div>
</div>
</div>
</body>

</html>

在html元素中加入几个类名就可以轻松实现，具体的操作就不废话了，想了解的可以参考bootstrap4中文网站，对于从小英语不及格的我，这个网站对我的帮助是大大的。

卡列瀑布流布局

相信刷过小红书的朋友们，见过小红书布局样式，它的图片宽度一样，高度不同，排列时顺序不同。
瀑布流排列时，总是找每列高度最小的排。这是瀑布流布局基本的原理。
具体实现要用js，方法各样。但是总的来说相对费力。
用bootstrap框架来做的说，可以说是易如反掌，
在上面bootstrap中文网链接中并没有就这个方面的介绍，所以要想了解需要到bootstrap4官网

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
<div class="container">
<div class="row">
<div class="col">
<div class="card-columns">
<div class="card ">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"
alt="" class="card-img-top">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This isxt below as a naturalitextw as a naturalhitext below as a natu below as a naturalhitext below as a naturalhitext below
</p>
</div>
</div>
<div class="card ">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"
alt="" class="card-img-top">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Thitextw as a naturalhitext below as a natu a naturalhitext below as a natu below as a naturalhitext belowbelow as a naturalhitext below as a naturalhitext below as a natural
</p>
</div>
</div>
<div class="card ">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"
alt="" class="card-img-top">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This isxt below as a natural
</p>
</div>
</div>
<div class="card ">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"
alt="" class="card-img-top">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This isxt below as a naturalitextw as a naturalhitext below as a natu below as a naturalhitext below as a naturalhitext below
</p>
</div>
</div>

</div>
</div>
</div>
</div>

</body>

</html>

效果如下：第四张卡片排在第三列（列高度最小）

网格列

网格是css3新出来的属性，在布局上面非常便捷，bootstrap也有这样的网格布局

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>

<body>

<div class="container">

<div class="row row-cols-md-3 row-cols-1">
<div class="col mb-4">
<div class="card ">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"
alt="" class="card-img-top">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This isxt below as a natural
</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card ">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"
alt="" class="card-img-top">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This isxt below as a natural
</p>
</div>
</div>
</div>

<div class="col mb-4">
<div class="card ">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"
alt="" class="card-img-top">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This isxt below as a natural
</p>
</div>
</div>
</div>

<div class="col mb-4">
<div class="card ">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"
alt="" class="card-img-top">
<div class=" card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This isxt below as a natural
</p>
</div>
</div>

</div>

</div>

</div>

</body>

</html>

.row-cols-md-3这个类意思是在中等屏幕下一行三列。当小于中等屏幕下时，若不加.row-cols-1,.col会平分成四列。存在.row-cols-1时，就算小于中等屏时，也只会一行一列。

  • 点赞
  • 收藏
  • 分享
  • 文章举报
码爸爸 发布了11 篇原创文章 · 获赞 5 · 访问量 313 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航