jtag引导卡_引导卡简介：引导卡变得简单

jtag引导卡

Bootcards is a UI framework for card interfaces. Like its name says, it is based on the Bootstrap framework and it has a dual-pane capability for both desktop and mobile.

Bootcards是卡接口的UI框架。 顾名思义，它基于Bootstrap框架，并且对台式机和移动设备均具有双窗格功能。

These days information is everywhere and sometimes the sheer amount of it can confuse us. With the rise of mobile devices, UX designers have been trying to create interfaces that are minimalistic and don’t overload users with information.

如今，信息无处不在，有时，纯粹的信息量可能会使我们感到困惑。 随着移动设备的兴​​起，UX设计人员一直在尝试创建简约的界面，并且不会使用户负担过多的信息。

Cards interfaces have been gaining lots of popularity, mainly because they focus on what’s important and are graphically catchy.

卡界面已经获得了广泛的欢迎，主要是因为它们专注于重要且图形醒目的图形。

Bootcards is mostly used on lists, Summary Cards, different type of File Cards, and Media Cards such as Twitter Cards. The framework is helpful when we want to create lists which contain more information than usual. Another use case for Bootcards relates to Summary Cards, which are a great way of creating card-based dashboards.

引导卡主要用于列表，摘要卡，不同类型的文件卡以及媒体卡(如Twitter卡)上。 当我们要创建包含比平常更多信息的列表时，该框架很有用。 引导卡的另一个用例与摘要卡有关，摘要卡是创建基于卡的仪表板的好方法。

为什么要刷卡 (Why Cards)

Cards are in fashion nowadays. They show exactly what users want by keeping the focus strictly on key points. You can use cards to display contact details, summaries, file information, and more. This pattern breaks the content into small components and arranges them in eye-catching designs.

如今， 卡片很流行。 通过严格地将重点放在关键点上，它们可以准确显示用户的需求。 您可以使用卡片显示联系人详细信息，摘要，文件信息等。 这种模式将内容分解为多个小部分，并将它们安排在醒目的设计中。

A lot of big names such as Google, Spotify, Pinterest and Amazon have used cards in their designs, especially in mobile devices. Cards gained importance when they got used for the first time by Twitter. Twitter Cards were presented in 2012 and since then the hype has gone up.

许多著名的公司，例如Google，Spotify，Pinterest和Amazon，都在设计中使用了卡片，尤其是在移动设备中。 卡在Twitter上首次使用时变得越来越重要。 Twitter Cards于2012年推出，此后的炒作增加了。

A cards-based layout consists of text, images, videos and more, all of which creates a valuable mix of information. Twitter uses cards to create a connection between users and content: users can quickly spot the summary that is important to them without having to go through the entire content. One more good reason for using Twitter Cards is to drive engagement to your Tweets.

基于卡片的布局由文本，图像，视频等组成，所有这些构成了有价值的信息组合。 Twitter使用卡片在用户和内容之间建立联系：用户可以快速发现对他们重要的摘要，而不必遍历整个内容。 使用Twitter Cards的另一个好理由是提高您的推文的参与度。

The Google Now Cards‘ slogan is to give the right information at the right time. Google Now Cards accomplish this by showing only valuable information with a focus on the needs of mobile users.

Google即时贴的口号是在正确的时间提供正确的信息。 Google即时贴通过仅显示有价值的信息(专注于移动用户的需求)来实现这一目标。

Bootcards offers a full set of features for creating high quality cards. The framework is optimized for all devices and media queries. Another good point is its native look and feel. It offers separate stylesheets for each platform: iOS, Android or Desktop.

Bootcards提供了用于创建高质量卡的全套功能。 该框架针对所有设备和媒体查询进行了优化。 另一个优点是它的本机外观。 它为每种平台提供单独的样式表：iOS，Android或桌面。

引导卡快速入门 (Quick Start with Bootcards)

In this section, we will learn how to create cards with the help of Bootcards. To get started, before adding Bootcards files, we need to add Bootstrap. Next, you can add Bootcards’ OS-specific CSS files (desktop, Android or iOS) and its JavaScript file.

在本节中，我们将学习如何在Bootcards的帮助下创建卡。 首先，在添加Bootcards文件之前，我们需要添加Bootstrap 。 接下来，您可以添加Bootcards的特定于操作系统CSS文件(台式机，Android或iOS)及其JavaScript文件。

The reason why Bootcards has OS-specific CSS files is to provide a UI that can change its look and feel depending on the platform that you are using. Different CSS files will change default heading colors, make the navbar collapsible and other UI changes. Be careful, you will only need to load one type of CSS file depending on the device being used to view your web page.

Bootcard具有特定于操作系统CSS文件的原因是要提供一个可以根据所使用的平台更改其外观的UI。 不同CSS文件将更改默认标题颜色，使导航栏可折叠以及其他UI更改。 请注意，您只需要加载一种CSS文件即可，具体取决于用于查看网页的设备。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<!-- Important: you'll only need one of the Bootcards CSS files below for every platform -->

<!-- Bootcards CSS for iOS: -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-ios.min.css">

<!-- Bootcards CSS for Android: -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-android.min.css">

<!-- Bootcards CSS for desktop: -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-desktop.min.css">

<!-- Bootstrap and Bootcards JS -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/js/bootcards.min.js"></script>

You can start working with Bootcards just by adding its CSS files, but for enhanced usability, make sure you include the JavaScript function below:

您可以仅通过添加引导卡CSS文件来开始使用引导卡，但是为了增强可用性，请确保您包括以下JavaScript函数：

bootcards.init({
  offCanvasBackdrop: true,
  offCanvasHideOnMainClick: true,
  enableTabletPortraitMode: true,
  disableRubberBanding: true
});

These options are especially useful if you are targeting mobile or iOS users. To show a backdrop when the offcanvas menu is displayed, set offCanvasBackdrop to true. In case you want to hide the offcanvas menu when you click outside it, you can use offCanvasHideOnMainClick. You can also enable single pane mode for tablets in portrait mode by setting the enableTabletPortraitMode to true. The last setting above, disableRubberBanding, is used to disable the rubber banding effect on iOS devices.

如果您针对移动或iOS用户，这些选项特别有用。 要在显示offcanvas菜单时显示背景，请将offCanvasBackdrop设置为true 。 如果要在外部单击时隐藏offcanvas菜单，则可以使用offCanvasHideOnMainClick 。 您还可以通过将enableTabletPortraitMode设置为true以纵向模式为平板电脑启用单窗格模式。 上面的最后一个设置disableRubberBanding用于禁用iOS设备上的橡皮筋效果。

创建更好的卡 (Create Better Cards)

After we have set up the environment, we can start creating some sample cards. You can find these samples on GitHub, if you’d like to follow along. We will discuss the most used components of this framework and their purpose.

设置环境后，我们可以开始创建一些样本卡。 如果您想继续，可以在GitHub上找到这些示例。 我们将讨论该框架最常用的组件及其目的。

详细清单和基本卡 (Detailed Lists and Base Card)

The first Bootcards example we will build, is a contact list displaying companies details and a search form on top. The contact list will be enhanced when we click on company names. This list is built on two components: Detailed Lists and Base Cards.

我们将构建的第一个Bootcards示例是一个联系人列表，该列表在顶部显示公司详细信息和搜索表单 。 当我们单击公司名称时，联系人列表将得到增强。 该列表基于两个组件：“详细列表”和“基本卡”。

Detailed Lists can be used to show the company names and some small details about them. If users want to learn more about a specific company, they can click the link on the Detailed List for that company to reveal the corresponding Base Card with the appropriate company details.

详细列表可用于显示公司名称和有关它们的一些小细节。 如果用户想了解有关特定公司的更多信息，则可以单击该公司的“详细列表”上的链接以显示具有适当公司详细信息的相应基本卡。

Base Cards are the best type of cards for detailed descriptions because they display the information in lists. Every list is separated by dividers.

基本卡是进行详细说明的最佳卡类型，因为它们在列表中显示信息。 每个列表都由分隔符分隔。

Finally, Detailed Lists and Base Cards are inter-connected: in our demo, each company inside Detailed Lists displays its full info in its corresponding Base Card.

最后，“详细列表”和“基本卡”是相互连接的：在我们的演示中，“详细列表”中的每个公司在其相应的“基本卡”中显示其完整信息。

See the Pen Bootcards: Detailed Lists & Base Card by SitePoint (@SitePoint) on CodePen.

见笔详细清单及基卡：Bootcards由SitePoint( @SitePoint上) CodePen 。

媒体卡 (Media Cards)

The second card we are going to create is a Twitter Card with a large image. We will use the Media Cards component for creating this card. Media Cards are used to display information containing text with images or videos.

我们要创建的第二张卡是一张具有大图像的Twitter卡 。 我们将使用媒体卡组件来创建此卡。 媒体卡用于显示包含带有图像或视频的文本的信息。

But first let’s talk more about Twitter Cards. A Twitter Summary Card is designed to show a quick preview of the content to the reader. After users click on the Summary Card, they will be redirected to the card’s related content for more details.

但是首先让我们更多地讨论Twitter卡。 Twitter摘要卡旨在向读者显示内容的快速预览。 用户单击摘要卡后，他们将被重定向到该卡的相关内容以获取更多详细信息。

Media Cards, like most other types of cards, are made of three areas: header, body and footer. The basic structure of a Media Card is shown below:

像大多数其他类型的卡一样，媒体卡由三个区域组成： header ， body和footer 。 介质卡的基本结构如下所示：

<div class="panel panel-default bootcards-media"> 
  <div class="panel-heading">....</div>
  <div class="panel-body"> ... </div> 
  <img src="http://www.linkofphoto.com/path"/> 
  <div class="panel-footer">...</div>
</div>

In our example of Twitter Card we have removed the panel-heading while leaving out the panel-body and the panel-footer components.

在我们的Twitter Card示例中，我们删除了panel-heading而忽略了panel-body和panel-footer组件。

Most of the content is contained inside the panel-body div, where we have placed the card’s logo, header and main content. Instead, we have put the reply, retweet and like buttons in the footer area.

大多数内容都包含在panel-body div中，我们在其中放置了卡片的徽标，标题和主要内容。 取而代之的是，我们在页脚区域中放置了回复，转发和类似按钮。

See the Pen Bootcards: Media Cards (Twitter Cards) by SitePoint (@SitePoint) on CodePen.

见笔介质卡(Twitter信息卡)：Bootcards由SitePoint( @SitePoint上) CodePen 。

摘要卡 (Summary Cards)

Sometimes we need to create dashboards or structures based on tabs that represent information by using icons or logos. To display this sort of structures, the Bootcards framework uses Summary Cards.

有时，我们需要基于使用图标或徽标表示信息的选项卡创建仪表板或结构。 为了显示这种结构，Bootcards框架使用了Summary Cards 。

Summary Cards can be used with other types of cards. In our example, we have used Chart and Table Cards alongside Summary Cards. In this case, Summary Cards can be seen as the door to the information displayed by these other types of cards.

摘要卡可以与其他类型的卡一起使用。 在我们的示例中，我们将图表 卡和表格卡与摘要卡一起使用。 在这种情况下，摘要卡可以看作是这些其他类型的卡显示的信息的大门。

See the Pen Bootcards: Summary Cards by SitePoint (@SitePoint) on CodePen.

见笔摘要卡：Bootcards由SitePoint( @SitePoint上) CodePen 。

For creating Chart Cards in the Finances and Growth section, we have used Morris.js. It is very helpful for creating infographics and charts. So, in case you use Chart Cards in your project, don’t forget to add those files:

为了在“财务和增长”部分中创建图表卡，我们使用了Morris.js 。 这对于创建图表和图表非常有帮助。 因此，如果您在项目中使用图表卡，请不要忘记添加这些文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

文件卡 (File Cards)

Another type of card that is very useful around the web is the File Card. The primary function of File Cards is to show information for PDFs, Word documents, spreadsheets and other non-media formats.

在网络上非常有用的另一种卡是文件卡 。 文件卡的主要功能是显示有关PDF，Word文档，电子表格和其他非媒体格式的信息。

For downloadable files, File Cards are among the most attractive ways of displaying this functionality to users.

对于可下载文件，文件卡是向用户显示此功能的最吸引人的方式之一。

The structure of File Cards is composed of three sections: page-header, page-footer and list-group. The only difference with Media Cards is that instead of the .page-body class, it uses the .list-group class on the container element.

文件卡的结构由三部分组成： page-header ， page-footer和list-group 。 与媒体卡的唯一区别在于，它在容器元素上使用了.list-group类，而不是.page-body类。

list-group is the space where we will put our supplementary content. Inside list-group we could put as many list-group-items as we want.

list-group是我们放置补充内容的空间。 在list-group内部，我们可以放入尽可能多的 我们想要的列表组项目。

<div class="list-group"> 
  <div class="list-group-item">content</div> 
  <div class="list-group-item">content</div> 
</div>

In our example we have used two list-group-items: one for the title name of the file, its type and its size, and another one for the description.

在我们的示例中，我们使用了两个list-group-items ：一个用于文件的标题名称，其类型和大小，另一个用于描述。

The footer section really makes File Cards interesting to look at. It contains three buttons which offer users the following options: download the file, save it for later or send it to someone with email.

页脚部分确实使File Cards有趣。 它包含三个按钮，为用户提供以下选项： 下载文件 ， 保存以备后用或通过电子邮件发送给他人 。

See the Pen Bootcards: File Cards by SitePoint (@SitePoint) on CodePen.

见笔档案卡：Bootcards由SitePoint( @SitePoint上) CodePen 。

The four Bootcards examples outlined here show some key features to better understand the framework and help you create your own cards.

这里概述的四个Bootcards示例显示了一些关键功能，以更好地了解框架并帮助您创建自己的卡。

结论 (Conclusion)

Bootcards is a great framework which combines the cards concept with the power of Bootstrap. As long as use of mobile devices continues to grow and popular platforms like Google and Twitter keep using it, cards-based design will stay strong.

Bootcards是一个很棒的框架，它将卡的概念与Bootstrap的功能结合在一起。 只要移动设备的使用持续增长，并且像Google和Twitter这样的流行平台继续使用它，基于卡的设计就将保持强大。

翻译自: https://www.sitepoint.com/introducing-bootcards-bootstrap-cards-made-easy/

jtag引导卡