建议和反馈

请填写你的反馈内容

BOOTSTRAP 4可扩展内容容器或卡的工作方式

2019-10-04 ·1395次阅读 ·读完需要7分钟

是Bootstrap 4中的一个新组件,可替换孔,面板和缩略图。卡是一种灵活且可扩展的内容容器。它包括页眉和页脚选项,各种内容,上下文背景颜色以及强大的显示选项。

这是一个示例,演示了如何创建卡片及其所有子部分和样式。将此代码放在index.html的容器元素的末尾:
<div class =“ row”> 
<div class =“ col-md-4”> 
<div class =“ card”>

<div class =“ card-header”>精选
</ div> 
<div class =“ card-block”> 
<h4 class =“ card-title”>卡片标题</ h4> 
<h6 class =“ card-subtitle” >支持卡字幕</ h6> 
</ div>

<img class =“ img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限”>

<div class =“ card-block”> 
<p class =“ card-text”> 
Lorem ipsum dolor坐着,在苏代尔大街上获得了毛利。Etiam dolor felis morbi nibh,mollit porttitor tempor,dignissim magna pellentesque dictumst bibendum dictum整数。
</ p> 
</ div>

<div class =“ card-block”> 
<a href="#" class="card-link">卡片链接</a> 
<a href="#" class="card-link">另一个链接</ a> 
</ div>

<div class =“ card-footer”> 
2天前
</ div> 
</ div>

</ div> 
<div class =“ col-md-4”> 
<div class =“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400 “ alt =”卡片图片上限“>

<div class =“ card-block”> 
<blockquote class =“ card-blockquote”>

<p> Lorem ipsum dolor坐着,安全奉献精英。</ p> 
<footer>在<cite title =“ Source Title”> Source Title </ cite> </ footer> 
</ blockquote> 
</ div> 
</ div> 
</ div </ div>中出名的人>

<div class =“ col-md-4”> 
<div class =“ card”> 
<div class =“ card-block”> 
<p class =“ card-text”> 
Lorem ipsum dolor atmet,在苏格拉底大道上毛里特前角。Etiam dolor felis morbi nibh,mollit porttitor tempor,dignissim magna pellentesque dictumst bibendum dictum整数。
</ p> 
</ div>

<img class =“ card-img-bottom img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限”> 
</ div> 
</ div>

<div class =“ col-md-4”> 
<div class =“ card”> 
<img class =“ card-img img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限“>

<div class =“ card-img-overlay”> 
<h4 class =“ card-title”>卡片标题</ h4> 
<p class =“ card-text”> Lorem ipsum dolor坐立不安。</ p > 
</ div> 
</ div> 
</ div>

<div class =“ col-md-4”> 
<div class =“ card card-inverse” style =“ background-color:black”> 
<div class =“ card-block”> 
<h3 class =“ card-title “>卡标题</ h3> 
<p class =” card-text“>在苏打达州苏梅特大街(sorcipit sodales)遇见毛利。</ p>

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

<div class =“ col-md-4”> 
<div class =“ card card-inverse card-primary”> 
<div class =“ card-block”> 
<h3 class =“ card-title”> Card Title </ h3> 
<p class =“ card-text”> Lorem ipsum dolor坐着,在苏打水苏维埃那里获得毛利。</ p> 
</ div> 
</ div> 
</ div>

<div class =“ col-md-4”> 
<div class =“ card card-inverse card-success”> 
<div class =“ card-block”> 
<h3 class =“ card-title”> Card Title </ h3> 
<p class =“ card-text”> Lorem ipsum dolor坐着,在苏打水苏维埃那里获得毛利。</ p> 
</ div> 
</ div> 
</ div>

<div class =“ col-md-4”> 
<div class =“ card card-inverse card-info”> 
<div class =“ card-block”> 
<h3 class =“ card-title”> Card Title </ h3> 
<p class =“ card-text”> Lorem ipsum dolor坐着,在苏打水苏维埃那里获得毛利。</ p> 
</ div> 
</ div> 
</ div>

<div class =“ col-md-4”> 
<div class =“ card card-inverse card-warning”> 
<div class =“ card-block”> 
<h3 class =“ card-title”> Card Title </ h3> 
<p class =“ card-text”> Lorem ipsum dolor坐着,在苏打水苏维埃那里获得毛利。</ p> 
</ div> 
</ div> 
</ div>

<div class =“ col-md-4”> 
<div class =“ card card-inverse card-danger”> 
<div class =“ card-block”> 
<h3 class =“ card-title”> Card Title </ H3> 
<p类= “卡文本”> Lorem存有悲坐阿梅特,在suscipit sodales eget赌注ultricies mauris。</ p> 
</ DIV> 
</ DIV> 
</ DIV> 
</ DIV> 
下面是如何在代码看起来:
Bootstrap 4的新功能

在这里,我创建了多张卡片,以便更轻松地演示其所有子部分和不同样式。

以下是先前代码的工作方式:

  1. 要创建卡,我们需要使用.card类。

  2. 默认情况下,卡的宽度是其父容器的100%。因此,这里我们使用网格系统来控制宽度。

  3. 在第一个卡中,我们有一个标头,它是使用.card-header类创建的。然后,我们有一个纸牌块,其中有一个标题和副标题。卡块是具有填充功能的卡的一部分。每当您需要在卡的任何部分填充时,只需使用.card-block类。使用.card-title创建卡标题,并使用.card-subtitle类创建卡字幕。.card-title和.card-subtitle类仅给出适当的边距。然后,我们仅获得一个响应式图像。之后,我们使用.card-text类创建一个段落。.card-text类可确保最后一个子元素没有底边距。然后,我们有两个与.card-link类的链接。.card-link从第二个开始向所有.card-link类应用左边距。最后,我们有一个卡页脚,

  4. 在第二张卡片中,我们有一个响应图像,然后是块引用。我们在图像中添加了.card-img-top类,从而在图像中添加了右上和左上的边框半径。我们还在块引用中添加了.card-blockquote,以消除块引用中的边距,填充和左边框。

  5. 在第三张卡片中,我们仅包含一些文本和一个响应式图像。我们在响应图像中添加了.card-img-bottom类,从而为图像添加了右下和左下边框半径。

  6. 我们创建的第四张卡片用于演示卡片叠加层。首先,我们使用.card-img类添加了自适应图像,该图像向所有角添加了边框半径。然后,我们使用.card-img-overlay类创建了一个叠加层,该叠加层仅使元素的位置具有绝对的填充量,并且没有顶部,右侧,左侧和底部,因此将内容放置在卡的顶部。

  7. 默认情况下,卡片使用深色文字并采用浅色背景。为白色文本添加.card-inverse,并指定背景颜色和边框颜色值。第五张卡是.card-inverse的演示。Bootstrap 4还提供了一些为卡片添加背景色和边框色的类。在最后五张牌中演示了这些课程。

 

卡组
卡组使您可以将卡呈现为具有相等宽度和高度列的单个附加元素。卡组仅适用于大于544像素的屏幕。
如果您需要一组彼此不连接的相同大小的卡,请使用卡座代替卡组。卡座仅适用于大于544像素的屏幕。
最后,卡片列可让您将卡片组织成类似砌体的列。卡片列仅适用于大于544像素的屏幕。
这是卡组,卡片组和列的代码示例。将其放在index.html的容器元素的末尾:
<div class =“ card-group”> 
<div class =“ card”>
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“ Card image cap”> 
<div class =“ card-block”> 
<p class =“卡文“> 
Lorem存有悲坐阿梅德,在suscipit sodales eget赌注ultricies mauris。Etiam dolor felis morbi nibh,mollit porttitor tempor,dignissim magna pellentesque dictumst bibendum dictum整数。
</ p> 
</ div> 
</ div> 
<div class =“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限“> 
</ div> 
<div class =” card“> 
<img class =”


<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“ Card image cap”> 
</ div> 
<div class =“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限”> 
</ div> 
<div class =“ card”>

<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限”> 
</ div> 
</ div>

<br> 
<div class =“ card-deck-wrapper”> 
<div class =“ card-deck”>

<div class =“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“ Card image cap”> 
<div class =“ card-块“> 
<p类=”卡文本“> 
Lorem存有悲坐阿梅特,在suscipit sodales eget赌注ultricies mauris。Etiam dolor felis morbi nibh,mollit porttitor tempor,dignissim magna pellentesque dictumst bibendum dictum整数。
</ p> 
</ div> 
</ div> 
<div class =“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限“> 
</ div> 
<div class =” card“>


<div class =“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限”> 
</ div> 
<div类=“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“ Card image cap”> 
</ div> 
<div class =“ card “>

<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“ Card image cap”> 
</ div> 
</ div> 
</ div>

<br> 
<div class =“ card-columns”> 
<div class =“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt = “卡片图像上限” 
<div class =“ card-block”> 
<p class =“ card-text”> 
Lorem ipsum dolor坐着,在苏打的苏维埃那里得到了毛利。Etiam dolor felis morbi nibh,mollit porttitor tempor,dignissim magna pellentesque dictumst bibendum dictum整数。
</ p> 
</ div> 
</ div> 
<div class =“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限“>


<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“ Card image cap”> 
</ div> 
<div class =“ card”> 
<img class =“ card-img-top img-fluid” src =“ https://placehold.it/800x400” alt =“卡片图片上限”> 
</ div> 
<div class =“ card”> 
<img class =“ card -img-top img-fluid“ src =” https://placehold.it/800x400“ alt =”卡片图片上限“> 
</ div> 
<div class =” card“> 
<img class =” card-img-顶部img-fluid“ src =” https://placehold.it/800x400“ alt =”卡片图片上限“> 
</ div> 
</ div>
这是代码的输出:
学习Bootstrap 4

 

如您所见,我们已经使用.card-group类创建了一个类组。我们已经使用.card-deck-wrapper和.card-deck创建了一个卡片组,最后,使用.card-columns将卡片组织成类似Masonry的列。


评论(0)问答(0)
请先登录或注册

请先登陆或注册

相关推荐

以太坊钱包是什么意思

您可以通过哪种软件使用以太坊?哪个在手机上运行,哪个在Linux上运行?哪个对存储以太币有好处,哪个对令牌有用,哪些可以与智能合约进行交互?我们为您提供每种设备和需求的钱包清单。虽然有数十个比特币钱包......
樱花YING · 2019-11-15
310阅读 · 0赞赏 · 0问答

以太坊钱包人如何使用

加密货币钱包是一种用于安全存储您的加密货币并将加密货币发送给他人的软件。它用作银行帐户,可以存储货币以及接收和汇出货币。一个复仇的钱包允许用户存储,发送和接收任何ERC20的复仇blockchain令......
· 2019-11-15
340阅读 · 0赞赏 · 0问答

EOS钱包如何创建

EOS利用具有资源赌注模式的账户系统,在EOS区块链上执行的任何操作都会消耗资源,包括创建EOS账户。为了完成EOS帐户创建过程,需要另一个具有足够EOS币的EOS钱包来支付所需的资源。当前,imTo......
mON · 2019-11-15
242阅读 · 0赞赏 · 0问答

捷报频传!SVT和GA强势上线FCion交易所,领涨市场!

科技的发展日新月异,信息的交替层出不穷。2019年,区块链技术自诞生至此,已走过了十余年。在其发展过程中,造就了几次风口:第一次风口,大约在2013年,主要研究加密数字货币在各领域的应用,最后诞生了R......
eason1688 · 2019-11-11
402阅读 · 0赞赏 · 0问答

加密货币钱包现状和未来发展

在区块链应用场景中,钱包是第一个落地应用的项目,也是加密货币的关键基础设施,同时,每一种加密货币的交易方式都是仰仗钱包进行。目前,加密钱包种类繁多,据调查发现,有近4亿美元资金流向加密钱包业务,其中以......
smallfish · 2019-11-11
398阅读 · 0赞赏 · 0问答

BitDATA纽约大会强势来袭,Spinach带你亮点抢先看!

2019年,区块链行业热闹非凡。随着中国提出把区块链作为核心技术自主创新重要突破口,指出区块链技术应用已经延伸到数字金融、物联网、智能制造、供应链管理、数字资产交易等多个领域。在此背景之下,一场区块链......
eason1688 · 2019-11-09
713阅读 · 0赞赏 · 0问答

calculator

1911

LK币

13

粉丝

41

笔记

感谢"calculator"

这篇精彩的笔记,目前已经帮助

  • 0
  • 1
  • 3
  • 9
  • 5
喜欢0
链客社群 加入

微博进入

商务合作>

广告投放>

公司名称:北京链客行科技有限公司

联系方式:010-67707199

ICP备案号:京ICP备18032136号

Copyright:链客区块链技术问答社区 版权所有

感谢您的提问,问题被社区永久收入以便新人查看。一定要记得采纳最佳答案哦!加油!

感谢您的善举,每一次解答会成为新人的灯塔,回答被采纳后获得20算力和相应的LK币奖励

您将赞赏给对方2LK币的奖励哦!感谢您的赞赏!

您将赞赏给对方2LK币的奖励哦!感谢您的赞赏!