<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added, extended color palette and beautiful typography, designed as its own extended version of Bootstrap at the highest level of quality. ">
<meta name="author" content="Webpixels">
<title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
<!-- Plugins -->
<link rel="stylesheet" href="../assets/vendor/animate/animate.min.css" type="text/css">
<!-- Theme CSS -->
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
<!-- Demo CSS - No need to use these in your project -->
<link rel="stylesheet" href="../assets/vendor/jquery-scrollbar/css/jquery-scrollbar.css">
<link type="text/css" href="../assets/vendor/highlight/css/highlight.min.css" rel="stylesheet">
<link type="text/css" href="../assets/css/demo.css" rel="stylesheet">
</head>
<body>
<main class="main">
<aside class="sidebar" id="nav_docs">
<div class="sidebar-brand">
<h1 class="font-weight-400"><a href="../"><span class="font-weight-700">Boomerang</span> UI Kit</a></h1>
</div>
<div class="scrollbar-inner">
<ul class="navigation pr-3">
<li class="navigation-title">Getting started</li>
<li class="navigation-item">
<a href="introduction.html" class="navigation-link">Introduction</a>
</li>
<li class="navigation-item">
<a href="file-structure.html" class="navigation-link">File structure</a>
</li>
<li class="navigation-item">
<a href="plugins.html" class="navigation-link">Plugins</a>
</li>
<li class="navigation-item">
<a href="customization.html" class="navigation-link">Customization</a>
</li>
<li class="navigation-item">
<a href="update.html" class="navigation-link">Update</a>
</li>
<li class="navigation-title">Design elements</li>
<li class="navigation-item">
<a href="colors.html" class="navigation-link">Colors</a>
</li>
<li class="navigation-item">
<a href="typography.html" class="navigation-link">Typography</a>
</li>
<li class="navigation-item">
<a href="icons.html" class="navigation-link">Icons</a>
</li>
<li class="navigation-title">Components</li>
<li class="navigation-item">
<a href="alerts.html" class="navigation-link">Alerts</a>
</li>
<li class="navigation-item">
<a href="avatars.html" class="navigation-link">Avatars</a>
</li>
<li class="navigation-item">
<a href="badges.html" class="navigation-link">Badges</a>
</li>
<li class="navigation-item">
<a href="buttons.html" class="navigation-link">Buttons</a>
</li>
<li class="navigation-item">
<a href="cards.html" class="navigation-link">Cards</a>
</li>
<li class="navigation-item">
<a href="dropdowns.html" class="navigation-link">Dropdowns</a>
</li>
<li class="navigation-item">
<a href="forms.html" class="navigation-link">Forms</a>
</li>
<li class="navigation-item">
<a href="modal.html" class="navigation-link">Modal</a>
</li>
<li class="navigation-item">
<a href="navbar.html" class="navigation-link">Navbar</a>
</li>
<li class="navigation-item">
<a href="navs.html" class="navigation-link">Navs</a>
</li>
<li class="navigation-item">
<a href="pagination.html" class="navigation-link">Pagination</a>
</li>
<li class="navigation-item">
<a href="progress.html" class="navigation-link">Progress</a>
</li>
<li class="navigation-item">
<a href="tables.html" class="navigation-link">Tables</a>
</li>
<li class="navigation-item">
<a href="tooltips.html" class="navigation-link">Tooltips</a>
</li>
</ul>
</div>
</aside>
<section class="content">
<div class="header">
<div class="navigation-trigger d-xl-none" data-action="aside-open" data-target=".sidebar">
<div class="navigation-trigger-inner">
<i class="navigation-trigger-line"></i>
<i class="navigation-trigger-line"></i>
<i class="navigation-trigger-line"></i>
</div>
</div>
<div class="header-brand d-xl-none">
<h1><a href="index.html">Boomerang UI Kit</a></h1>
</div>
<div class="header-nav ml-auto">
<ul class="nav align-items-center">
<li class="nav-item d-none d-md-inline-block">
<a class="nav-link pl-0 active" href="../">Go to UI Kit</a>
</li>
<li class="nav-item d-none d-md-inline-block">
<a class="nav-link" href="../docs/changelog.html">Changelog</a>
</li>
<li class="nav-item ml-4">
<a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" class="btn btn-sm btn-primary">Download Free</a>
</li>
</ul>
</div>
</div>
<div class="content-inner content-docs">
<div class="container">
<div class="pt-3 pb-4 mb-4 border-bottom">
<div class="row">
<div class="col-lg-6">
<h2 class="heading h2 font-weight-bold">Cards</h2>
<p>Our cards provide a flexible and extensible content container with multiple variants and options.</p>
<a href="http://getbootstrap.com/docs/4.0/components/card" target="_blank">Open Bootstrap Docs</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9">
<h3 id="example">Example</h3>
<div class="code-example">
<div class="card" style="width: 18rem;">
<img class="img-fluid" src="holder.js/600x400?auto=yes" alt="Card image cap" />
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text....</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"holder.js/600x400?auto=yes"</span> <span class="na">alt=</span><span class="s">"Card image cap"</span> <span class="na">class=</span><span class="s">"img-fluid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">class=</span><span c
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论





















收起资源包目录





































































































共 1501 条
- 1
- 2
- 3
- 4
- 5
- 6
- 16
资源评论



liangjing850330
- 粉丝: 1
- 资源: 1
上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


会员权益专享
安全验证
文档复制为VIP权益,开通VIP直接复制
