Bootstrap -Card卡片

Cards(卡片)

Bootstrap 提供了一个可伸缩可扩展的内容容器给多种变量和选择。

关于

卡片是一个灵活的、可扩展的内容容器。它包括用于页眉和页脚的选项、各种各样的内容、上下文背景颜色和强大的显示选项。如果您熟悉Bootstrap 3,卡将替换我们的旧面板、井和缩略图。与这些组件类似的功能可以作为卡片的修饰符类使用。

例子

卡片是用尽可能少的标记和样式构建的,但仍然能够交付大量的控制和定制。使用flexbox构建,它们提供了简单的对齐和与其他引导组件的良好混合。它们在默认情况下没有空白,所以根据需要使用间距实用程序。
下面是一个混合内容和固定宽度的基本卡片示例。卡片没有固定的起始宽度,因此它们自然会填充其父元素的全部宽度。这是很容易定制与我们的各种大小选项。
Bootstrap -Card卡片_第1张图片

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card titleh5>
    <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 somewherea>
  div>
div>

内容类型

卡片支持各种各样的内容,包括图像、文本、列表组、链接等等。下面是支持的示例。

主体

卡片的构造块是.card-body。当您需要在卡片中填充部分时,可以使用它。
Bootstrap -Card卡片_第2张图片

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  div>
div>

标题、文本和链接

通过将. Card -title添加到标记中来使用卡片标题。以同样的方式,通过向标记添加.card-link来添加和放置链接。

通过向标记添加.card-subtitle来使用字幕。如果.card-title和.card-subtitle项被放置在.card-body项中,那么card title和subtitle就可以很好地对齐。
Bootstrap -Card卡片_第3张图片

演示代码

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card titleh5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitleh6>
    <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="card-link">Card linka>
    <a href="#" class="card-link">Another linka>
  div>
div>

图像

.card-img-top将图像放在卡片的顶部。使用.card-text,可以将文本添加到卡中。.card- Text中的文本也可以使用标准HTML标记进行样式设计。
Bootstrap -Card卡片_第4张图片

演示代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <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>
  div>
div>

列表组

在具有刷新列表组的卡片中创建内容列表。
Bootstrap -Card卡片_第5张图片

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odioli>
    <li class="list-group-item">Dapibus ac facilisis inli>
    <li class="list-group-item">Vestibulum at erosli>
  ul>
div>

Bootstrap -Card卡片_第6张图片
添加了header。

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odioli>
    <li class="list-group-item">Dapibus ac facilisis inli>
    <li class="list-group-item">Vestibulum at erosli>
  ul>
div>

厨房的水槽

混合并匹配多种内容类型来创建您需要的卡片,或者将所有内容都放入其中。下面显示的是图像样式、块、文本样式和列表组—所有这些都包装在固定宽度的卡片中。
Bootstrap -Card卡片_第7张图片

演示代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card titleh5>
    <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>
  div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odioli>
    <li class="list-group-item">Dapibus ac facilisis inli>
    <li class="list-group-item">Vestibulum at erosli>
  ul>
  <div class="card-body">
    <a href="#" class="card-link">Card linka>
    <a href="#" class="card-link">Another linka>
  div>
div>

页头和页脚

Bootstrap -Card卡片_第8张图片

<div class="card">
  <div class="card-header">
    Featured
  div>
  <div class="card-body">
    <h5 class="card-title">Special title treatmenth5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
div>

Card headers can be styled by adding .card-header to elements.
头部修饰:
在这里插入图片描述

<h5 class="card-header">Featuredh5>

一个不错的例子

Bootstrap -Card卡片_第9张图片

<div class="card">
  <div class="card-header">
    Quote
  div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Titlecite>footer>
    blockquote>
  div>
div>

不错的例子2

Bootstrap -Card卡片_第10张图片

<div class="card text-center">
  <div class="card-header">
    Featured
  div>
  <div class="card-body">
    <h5 class="card-title">Special title treatmenth5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
  <div class="card-footer text-muted">
    2 days ago
  div>
div>

大小

卡片没有特定的宽度来开始,所以它们将是100%的宽度,除非另有说明。您可以根据需要使用自定义CSS、网格类、网格Sass mixin或实用程序来更改这一点。

通过网格布局来布局我们的标签

Bootstrap -Card卡片_第11张图片

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

使用工具类

使用我们的几个可用的大小工具来快速设置卡片的宽度。
Bootstrap -Card卡片_第12张图片

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card titleh5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Buttona>
  div>
div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card titleh5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Buttona>
  div>
div>

使用自定义的CSS

使用自定义的css到你的样式表中去指定内联样式的宽度。
Bootstrap -Card卡片_第13张图片

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatmenth5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
div>

文本排列

您可以使用我们的text align类快速更改任何卡片的文本对齐方式(包括全部或特定部分)。
Bootstrap -Card卡片_第14张图片

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatmenth5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatmenth5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatmenth5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
div>

导航栏目

使用引导程序的导航组件向卡的头(或块)添加一些导航。
Bootstrap -Card卡片_第15张图片

<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="#">Activea>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">Linka>
      li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      li>
    ul>
  div>
  <div class="card-body">
    <h5 class="card-title">Special title treatmenth5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
div>

下面header 的样式跟上面的有些许不同。
Bootstrap -Card卡片_第16张图片

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Activea>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">Linka>
      li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
      li>
    ul>
  div>
  <div class="card-body">
    <h5 class="card-title">Special title treatmenth5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.p>
    <a href="#" class="btn btn-primary">Go somewherea>
  div>
div>

图像

卡片包括一些处理图像的选项。选择在卡的两端附加“图像帽”,将图像与卡的内容叠加,或简单地将图像嵌入卡中。

图像帽

与页眉和页脚类似,卡片可以包括顶部和底部的“图像帽”——卡片顶部或底部的图像。
Bootstrap -Card卡片_第17张图片
Bootstrap -Card卡片_第18张图片

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card titleh5>
    <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 agosmall>p>
  div>
div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card titleh5>
    <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 agosmall>p>
  div>
  <img src="..." class="card-img-top" alt="...">
div>

图像上浮文本

将图像转换为卡片背景并覆盖卡片的文本。根据映像的不同,您可能需要也可能不需要其他样式或实用程序。
Bootstrap -Card卡片_第19张图片

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card titleh5>
    <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 agop>
  div>
div>

注意,内容不应该大于图像的高度。如果内容大于图像,则内容将显示在图像之外。

水平布局

使用网格和实用程序类的组合,卡可以以一种移动友好和响应的方式水平放置。在下面的示例中,我们删除带有.no- guet的网格沟槽,并使用.col-md-*类使卡片在md断点处保持水平。根据您的卡的内容可能需要进一步的调整。
Bootstrap -Card卡片_第20张图片

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card titleh5>
        <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 agosmall>p>
      div>
    div>
  div>
div>

华丽的卡片样式

背景色和字体颜色

Bootstrap -Card卡片_第21张图片

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body">
    <h5 class="card-title">Primary card titleh5>
    <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>
  div>
div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body">
    <h5 class="card-title">Secondary card titleh5>
    <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>
  div>
div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body">
    <h5 class="card-title">Success card titleh5>
    <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>
  div>
div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body">
    <h5 class="card-title">Danger card titleh5>
    <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>
  div>
div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body">
    <h5 class="card-title">Warning card titleh5>
    <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>
  div>
div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body">
    <h5 class="card-title">Info card titleh5>
    <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>
  div>
div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body">
    <h5 class="card-title">Light card titleh5>
    <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>
  div>
div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body">
    <h5 class="card-title">Dark card titleh5>
    <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>
  div>
div>

边框

Bootstrap -Card卡片_第22张图片

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card titleh5>
    <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>
  div>
div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Headerdiv>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card titleh5>
    <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>
  div>
div>

Mixins 实用工具

您还可以根据需要更改卡片页眉和页脚的边框,甚至可以使用.bg-transparent删除它们的背景颜色。
Bootstrap -Card卡片_第23张图片

。。。还有好多,未完待续

你可能感兴趣的:(Bootstrap,前端)