vue分步引导组件_引导卡组件：完整介绍
vue 分步引导组件
In this article, I’m going to introduce you to the Bootstrap card component and walk you through its many features and uses. By the end of this tutorial, you’ll be able to incorporate Bootstrap cards in your web projects for great layouts and page content organization.
在本⽂中，我将向您介绍Bootstrap卡组件，并逐步介绍其许多功能和⽤法。 在本教程结束时，您将能够在您的Web项⽬中合并Bootstrap 卡，以实现出⾊的布局和页⾯内容组织。
Bootstrap is the most popular HTML, CSS, and JavaScript framework for quickly creating responsive and mobile-first web layouts.
Bootstrap是最流⾏HTML，CSS和JavaScript框架，⽤于快速创建响应式和移动优先的Web布局。
jquery是什么功能组件Using Bootstrap offers many advantages to developers, including the following:
使⽤Bootstrap为开发⼈员提供了许多优势，其中包括：
you can easily and quickly build a responsive layout by having only some knowledge of HTML and CSS
您只需了解⼀些HTML和CSS即可轻松快速地构建响应式布局
the library was built to be mobile-first from the core
该库从核⼼构建为移动优先
it’s compatible with all modern browsers etc.
它与所有现代浏览器等兼容。
it uses Flexbox for its grid system
它在其⽹格系统中使⽤了Flexbox
it provides tons of features and components.
它提供了⼤量的功能和组件。
The latest release of Bootstrap offers many new, modern features — such as the support for Flexbox, and the new , which replaces panels, thumbnails and wells from earlier versions of the library.
最新版本的Bootstrap提供了许多新的现代功能，例如对Flexbox的⽀持以及新的 ，该将替换库的早期版本中的⾯板，缩略图和Kong。
引导卡组件是什么？ (What Is the Bootstrap Card Component?)
Bootstrap introduces a new UI component for creating cards which provides a flexible and stylish container for showing content. Cards come with minimal styling, but you can easily extend them with extra styling options.
Bootstrap引⼊了⼀个新的⽤于创建卡的UI组件，该组件提供了⼀个灵活⽽时尚的容器来显⽰内容。 卡具有最⼩的样式，但是您可以使⽤其他样式选项轻松扩展它们。
This component is built on top of Flexbox, and you can use the Bootstrap for margins and padding.
该组件建⽴在Flexbox的基础上，您可以将Bootstrap ⽤于边距和填充。
Cards can conveniently accommodate different types of content like title, subtitle, body copy, and images etc., and optional header and footer sections. You can also include different sections (card blocks) to construct different types of cards depending on your use.
卡⽚可以⽅便地容纳不同类型的内容，例如标题，字幕，正⽂和图像等，以及可选的页眉和页脚部分。 您还可以包括不同的部分(卡块)，以根据⽤途构造不同类型的卡。
在项⽬中包含Bootstrap (Including Bootstrap in Your Project)
You can very easily start using Bootstrap in your website by either including it from a CDN or downloading it from .
通过从CDN包含它或从下载它，您可以⾮常轻松地在⽹站中开始使⽤Bootstrap。
For the sake of introducing the new Bootstrap card component, you’re going to create a simple HTML page with Bootstrap
styling to demonstrate the basic elements of the card component. Go ahead and create the index.html file inside your project
folder, then add the following content from the :
为了引⼊新的Bootstrap卡组件，您将使⽤Bootstrap样式创建⼀个简单HTML页⾯，以演⽰卡组件的基本元素。 继续，在您的项⽬⽂件夹
中创建index.html⽂件，然后从添加以下内容：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IW
<title>Bootstrap Card Example</title>
</head>
<body>
<div class="container">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="code.jquery/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG    <script src="cdnjs.cloudflare/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUib    <script src="maxcdn.bootstrapcdn/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquV  </body>
</html>
We’ve included Bootstrap files and their dependencies (jQuery and popper.js) from different CDNs, then created a
container division.
我们包含了来⾃不同CDN的Bootstrap⽂件及其依赖项(jQuery和popper.js)，然后创建了⼀个容器分区。
卡的最⼩样式 (Minimal Styling for Cards)
In order to create a basic card, we need to —
为了创建基本卡，我们需要-
use .card with a div tag to create the outer container
使⽤.card和div标签创建外部容器
add the .card-body class to an inner div tag to create the card body
将.card-body类添加到内部div标签中以创建卡体
use .card-title and card-subtitle classes with heading tags for adding the title and the subtitle
使⽤带有标题标签的.card-title和card-subtitle类添加标题和字幕
use the card-text class with <p> tags to add textual content
使⽤带<p>标记的card-text类添加⽂本内容
use the card-img-top class with the <img> tag to add an image to the top of the card.
使⽤具有<img>标签的card-img-top类将图像添加到卡的顶部。
These are the basic elements that constitute a full but basic card layout, as we can see from the following example：这些是构成完整但基本的卡布局的基本元素，如下⾯的⽰例所⽰：
<div class="card">
<img class="card-img-top" src="source.unsplash/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
</div>
This is a screenshot of the result:
这是结果的屏幕截图：
As can be seen, the card takes the full width of its container div.
可以看出，卡⽚占据了容器div的整个宽度。
By simply switching the card-body class with the card-img-overlay class, we can use the image as an overlay:
通过简单地将card-body类与card-img-overlay类切换，我们可以将图像⽤作叠加层：
We can also use the class .card-img-bottom with the <img> tag to add the image at the bottom of the card：我们还可以将类.card-img-bottom与<img>标记⼀起使⽤，以将图像添加到卡的底部：
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="source.unsplash/daily" alt="Card image top">
<div class="card-body">
<p class="card-text">A Card with a top and bottom images</p>
</div>
<img class="card-img-bottom" src="source.unsplash/daily" alt="Card image top">
<div class="card-footer">
This is a footer
</div>
</div>
The card top and bottom images are called .
卡的顶部和底部图像称为 。
控制引导卡组件的宽度和⾼度 (Controlling Bootstrap Card Component Width and Height)
By default, cards take all the available width in their parent container, but you can use the width and max-width classes to control take control of the card’s dimensions. So, let’s change the previous example by reducing the width of the card:
默认情况下，卡⽚采⽤其⽗容器中所有可⽤的宽度，但是您可以使⽤width和max-width类来控制卡⽚的尺⼨。 因此，让我们通过减⼩卡的宽度来更改前⾯的⽰例：
<div class="card" >
<img class="card-img-top" src="source.unsplash/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
</div>
Normally, the height of the card will be adjusted to vertically fit the content of the card, but we can also control it using custom CSS (for example, ) or Bootstrap’s sizing utilities (for examle, <div class="card h-200">).
通常，将调整卡的⾼度以使其垂直适合卡的内容，但是我们也可以使⽤⾃定义CSS(例如， )或Bootstrap的⼤⼩调整实⽤程序(例如， <div class="card h-200"> )。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。