bootstrap组件（卡片）学习笔记

最新推荐文章于 2023-10-22 11:08:53 发布
最新推荐文章于 2023-10-22 11:08:53 发布
阅读量1.1k 收藏 5
点赞数
分类专栏： bootstrap 文章标签： bootstrap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45472813/article/details/105326353
版权

组件卡片介绍

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时，就算小于中等屏时，也只会一行一列。在这里插入图片描述

凌览1
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap4随书笔记
11-10
本笔记是作者经过一个月深入学习Bootstrap4后的成果，包括亲手敲打的代码、详细的索引和学习心得，还有相关的参考资料链接。 Bootstrap4的核心概念是网格系统，它基于12列的响应式布局，可以根据屏幕尺寸自动调整...
BootStrap01
weixin_62332711的博客
04-03 1757
初始BootStrap Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 使用的软件：HBuilder X 首先，使用bootstrap必须去BootStrap官网下载文件，然后解压到文件夹即可。 这里是BootStrap官网链接： Bootstrap中文网 然后把载好的 bootstrap 文件导入js目录文件里面 打开长这样 ..
Bootstrap系列之栅格系统
老__L的博客
05-23 3815
使用我们内置的网格Sass变量和映射，可以完全定制预定义的网格类。更改层数、媒体查询维度和容器宽度，然后重新编译。
Bootstrap 格栅 row-cols-X row-cols-3 row-cols-5
lio567的博客
09-24 1088
网上实际是太少关于row-cols-X样式的资料 昨天摸爬打滚试出来了，记录一下 如果使用Bootstrap3 row-cols-X不会生效 row-cols-X只适用于Bootstrap4以上的版本，这里建议使用最新的版本 官网地址 https://v4.bootcss.com/ 懒人可以直接引用以下 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-D
Bootstrap网格系统参数解析
weixin_42075274的博客
06-01 420
在使用网格系统时有许多参数我们需要弄清楚，下面是我自己结合所学整理的，第一次写博客，写的不好还请见谅。 要知道Bootstrap网格系统，我们首先要知道Bootstrap的使用。然后我们要知道在Bootstrap网格系统中，将一个页面或者板块分为12列，而我们最大可以获得12列。 row：表名在该div里使用网格 col-xs-*：表示在超小型设备上使用（手机）。特点：一直水平。 col-sm-*:表示在小型设备上使用（平板电脑）。特点：以折叠开始，断点以上是水平的，其中*范围是从1到1...
Bootstrap的卡片组件相关知识
昊虹AI笔记
10-22 1483
Bootstrap的卡片组件相关知识
bootstrap5全套笔记
03-27
4. **组件**：笔记中可能会详细讲解各种Bootstrap5组件，如卡片（cards）、导航条（navbars）、按钮（buttons）、表单（forms）、下拉菜单（dropdowns）、模态（modals）、轮播（carousels）等。这些组件具有预设...
李炎恢Bootstrap讲义pdf笔记
05-27
8. **组件和插件**：涵盖Bootstrap的各种组件，如警告框（Alerts）、卡片（Cards）、模态框（Modals）和下拉面板（Dropdowns）。此外，还有JavaScript插件，如模态、滚动监听、 affix等，它们增强了交互性。 9. **...
bootstrap响应式网页作业age-processing开发笔记
最新发布
06-25
在这个作业中，开发者可能学习如何利用Bootstrap的网格系统、CSS样式、JavaScript组件等特性，来创建一个用户界面友好且在不同屏幕尺寸下都能良好展示的网页。 Bootstrap的核心特点是其响应式布局，这意味着网页...
bootstrap响应式网页作业ech-1开发笔记
06-24
HTML是网页的基础结构语言，Bootstrap提供了许多预定义的HTML组件，如导航条、按钮、表单、卡片等，这些组件已经内置了样式和响应式行为。例如，我们可以使用`<nav class="navbar navbar-expand-lg">`创建一个可折叠...
用vue和bootstrap实现用户信息添加效果
m0_71014221的博客
04-12 258
输入框为空时弹出警示框提醒用户完善信息；数据相同时提醒用户数据重复。
bootstrap卡片
lin1072368472的博客
02-16 525
卡片一种可伸缩可扩展的容器 ##卡片的设置 div.card 容器 （div.card指 div 容器加上class 下面文章不在声明） div.card-body 容器 父级是.card h*.card-title 卡片标签 可放在.card也可以放cark-body中 （h* 指 h1-h7） <div class="card"> <d...
Bootstrap -Card卡片
热门推荐
xiabenshu的博客
05-08 1万+
Cards（卡片） Bootstrap 提供了一个可伸缩可扩展的内容容器给多种变量和选择。 关于 卡片是一个灵活的、可扩展的内容容器。它包括用于页眉和页脚的选项、各种各样的内容、上下文背景颜色和强大的显示选项。如果您熟悉Bootstrap 3，卡将替换我们的旧面板、井和缩略图。与这些组件类似的功能可以作为卡片的修饰符类使用。 例子 卡片是用尽可能少的标记和样式构建的，但仍然能够交付大量的控制和定制...
Bootstrap系列之卡片（Cards）
老__L的博客
05-29 5772
Bootstrap卡片提供了一个灵活的、可扩展的内容容器，具有多个变体和选项。卡片是一种灵活的、可扩展的内容容器。它包括页眉和页脚选项、各种各样的内容、背景颜色和强大的显示选项。如果你熟悉Bootstrap 3，卡片可以代替我们的旧面板、井和缩略图。与这些组件类似的功能可用作纸牌的修饰类。卡片使用尽可能少的标记和样式，但仍然设法提供大量的控制和定制。建立与flexbox，他们提供容易对齐和混合好与其他Bootstrap组件。默认情况下它们没有空白，因此需要时使用间距实用程序。下面是一个混合内容和固定宽度的基
HTML学习（二）
weixin_64286326的博客
01-16 341
前言 上一次了解了html的基本形式，这一次我们着重学习html的一些标签的作用 div标签与span标签 两者都可以理解为布局，包括文字或者包括别的标签 1 div <div style="color:blue">我在div里面1</div> <div>我在div里面2</div> <div>我在div里面3</div> 2 span标签 <span style="color:blue"&gt...
Bootstrap Grid system [布局：栅格系统]
Jessieeeeeee的博客
01-23 965
Bootstrap 栅格系统（Grid System） Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 运行示例 Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的，具有完全的响应能力。...
Bootstrap4的栅格布局
weixin_45884768的博客
03-04 4987
Bootstrap4栅格布局1 栅格容器2 栅格布局的步骤3 声明列3.1 设置列宽3.1.1 平均分配栅格3.2.2 指定列宽3.2.3 可变的列宽3.3 列拆分3.3.1 自动拆分3.3.2 手动拆分3.3.3 响应式拆分3.4 列排序3.5 列偏移 Bootstrap架构内置了一套响应式网格的布局系统，网格布局实际上就是把网页分成一定数量的栏数或者叫做网格，Bootstrap4的网格系统就是...
关于栅格系统布局的介绍
all_imagination的博客
01-22 2951
定义 栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局 我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。 在一个有限的、固定的平面...
Bootstrap组件——卡片
xun__xing的博客
07-29 4389
卡片一、卡片（card）1.基础卡片2.内容类型2.宽度设置3.文本对齐4.导航5. 图像6.文本放在图片身上7.水平排列8.卡片样式9.卡片组 一、卡片（card） 卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。 卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。 1.基础卡片 <div class="row"> <div cla
bootstrap学习笔记
05-28
Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建各种响应式网站和应用程序。以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 CDN 引入。 2. 使用 Bootstrap 的网格系统 Bootstrap 的网格系统是它最重要的功能之一。它可以帮助你创建响应式布局，使你的网站在不同的设备上都能够良好地显示。使用 Bootstrap 的网格系统，你可以将页面分为不同的列和行，并在这些列和行中放置内容。 3. Bootstrap 的组件 Bootstrap 提供了许多组件，包括导航栏、表单、按钮、模态框、轮播图等等。这些组件可以帮助你快速构建功能丰富的页面。 4. 自定义 Bootstrap 样式 如果你想要使用自定义的样式，可以使用 Bootstrap 的 SASS 或 LESS 变量。这些变量可以帮助你更改 Bootstrap 的颜色、字体、间距等等。 5. 使用 Bootstrap 的插件 Bootstrap 还提供了许多插件，包括日期选择器、滚动条、下拉菜单等等。这些插件可以让你的网站更加交互性。 以上是关于 Bootstrap 的一些学习笔记，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值