<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
/*1.list-group*/
.list-group {
padding-left: 0;
margin-bottom: 0;
}
.list-group-item {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -.0625rem;
background-color: #fff;
border: .0625rem solid #dadada;
}
.list-group-item:first-child {
}
.list-group-item:last-child {
margin-bottom: 0;
}
.list-group-flush .list-group-item {
border-width: .0625rem 0;
}

/*2.card*/

.bd-example {
position: relative;
padding: 1rem;
margin: 1rem -1rem;
border: solid #dadada;
border-width: .2rem 0 0;
}
.bd-example::after {
content: "";
display: table;
clear: both;
}
.btn {
display: inline-block;
padding: .375rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
user-select: none;
border: .0625rem solid transparent;
border-radius: .25rem;
text-decoration: none;
}
.btn-primary {
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
}
.bd-example>.card {
max-width: 20rem;
}
.card {
position: relative;
background-color: #fff;
border: .0625rem solid #dadada;
border-radius: .25rem;
}
.card, .card-title {
margin-bottom: .75rem;
}
.card-img-top {
border-radius: .25rem .25rem 0 0;
}
.card-block {
padding: 1.25rem;
}
.card-subtitle, .card-text:last-child {
margin-bottom: 0;
}
.card-subtitle {
margin-top: -.375rem;
}
.text-muted {
color: #999;
}
.card-link+.card-link {
margin-left: 1.25rem;
}
.card-link:hover {
text-decoration: none;
}
/*3.card inverse*/
.card-inverse{
background-color: #333;
border-color: #333;
}
.card-inverse .card-blockquote,
.card-inverse .card-title,
.card-inverse .card-text{
color: #fff;
}
.card-primary{
background-color: #0275d8;
border-color: #0275d8;
}
.card-inverse .card-blockquote>footer{
color: rgba(255,255,255,.65);
}

/*4.card group*/
.card-group {
display: table;
width: 100%;
table-layout: fixed;
}
.card-group .card {
display: table-cell;
vertical-align: top;
}

/*5.card deck*/
.card-deck-wrapper {
margin-right: -1.25rem;
margin-left: -1.25rem;
}
.card-deck {
display: table;
table-layout: fixed;
border-spacing: 1.25rem 0;
}
.card-deck .card {
display: table-cell;
width: 1%;
vertical-align: top;
}
/*6.card deck*/
.card-flex{
/* display: -webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row nowrap;
justify-content: center;
-webkit-flex-flow:row wrap*/
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
background-color: lightgrey;
}
.card-flex .card{
background-color: cornflowerblue;
width: 33.3333%;
margin: 10px;

}
</style>
</head>
<body>
<h2>1.list-group</h2><!-- <small>use margin-bottom: remove border-bottom.</small> -->
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>

<h2>2.card</h2>
<div class="bd-example" data-example-id="">
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x180" alt="100%x180" src="data:images/card.svg" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<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">Button</a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-block">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<h2>3.card inverse</h2>
<div class="bd-example" data-example-id="">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-block">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card card-inverse card-primary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>

</div>
<h2>4.card group</h2>
<div class="bd-example" data-example-id="">
<div class="card-group">
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x180" alt="100%x180" src="" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<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 ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x180" alt="100%x180" src="" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x180" alt="100%x180" src="" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<h2>5.card deck</h2>
<div class="bd-example" data-example-id="">
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer 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 ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>

<h2>6.card flex</h2>
<div class="bd-example" data-example-id="">
<div class="card-flex">
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer 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 ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer 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 ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>

</div>
</div>
</body>
</html>

card-test的更多相关文章

  1. Lesson 3 Please send me a card

    Text Postcards always spoil my holidays. Last summer, I went to Italy. I visited museums and sat in ...

  2. iOS - Card Identification 银行卡号识别

    1.CardIO 识别 框架 GitHub 下载地址 配置 1.把框架整个拉进自己的工程,然后在 TARGETS => Build Phases => Link Binary With L ...

  3. HDOJ 4336 Card Collector

    容斥原理+状压 Card Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  4. Opensuse enable sound and mic card

    Install application pavucontrol Run pavucontrol You will see the configuration about sound card and ...

  5. 进监狱全攻略之 Mifare1 Card 破解

    补充新闻:程序员黑餐馆系统 给自己饭卡里充钱 ,技术是双刃剑,小心,小心! 前言 从M1卡的验证漏洞被发现到现今,破解设备层出不穷,所以快速傻瓜式一键破解不是本文的重点,年轻司机将从本文中获得如下技能 ...

  6. Card（bestcoder #26 B)

    Card Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. [OpenJudge 3061]Flip The Card

    [OpenJudge 3061]Flip The Card 试题描述 There are N× Ncards, which form an N× Nmatrix. The cards can be p ...

  8. [杂谈]交通工具orca card

    How and Where to Use the ORCA Card The Microsoft ORCA card provides unlimited rides on all buses, tr ...

  9. [OrangePi] Backup internal EMMC to SD Card

    Boot your Orange PI board from EMMC without SD Card inserted login insert your SD Card Run: sudo ins ...

  10. [OrangePi] Installation on SD Card

    Download any of the available images (xz archive) from Mega or GoogleDrive Download scriptbin_kernel ...

随机推荐

  1. 【ASP.NET 进阶】定时执行任务

    原理:利用全局应用程序类 Global.asax 和 System.Timers.Timer  类定时处理任务. 示例效果图: 其 Global.asax 类代码如下: using System; u ...

  2. 【问题&解决】解决创建Android模拟器时提示"No system images installed for this target"的问题

    在创建Android模拟器时间发现提示“No system images installed for this target”问题,无法创建模拟器,如下图: 解决:经上网查证,发现原因在于CPU/AB ...

  3. Android系列----JUnit单元测试的使用

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  4. Windows系统安装Oracle 11g客户端

    一.下载 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html以下网址来源此官方下载页网 ...

  5. java9-2形式参数

    1.形式参数: 基本类型(太简单) 引用类型 类名:(匿名对象的时候其实我们已经讲过了)需要的是该类的对象 抽象类:需要的是该抽象的类子类对象 接口:需要的是该接口的实现类对象 A. 类名:(匿名对象 ...

  6. 007医疗项目-模块一：用户的查找：3.用户表查询的Action和Service

    这里主要写Action和Service. 先写Service层: 架构如下:

  7. 全面理解HTTP

    URL与URI 我们经常接触到的就是URL了,它就是我们访问web的一个字符串地址,那么URI是什么呢?他们是什么关系呢? URL:uniform resource location 统一资源定位符U ...

  8. android volley get请求使用

    调用百度api微博热门精选接口,使用了volley,简单说说volley get的请求方式的使用 header的设置和请求参数的设置,见代码如下: private void getWeixinNews ...

  9. 发发关于JavaScript的感慨，随手记几个js知识碎片

    最近一段时间写了很多JavaScript和jquery代码,越来越感觉js基础不牢固,写一句查半天,有时间肯定要系统的学一下. 不说了,先记一下最近学到的点东西,省的以后没时间系统学js还要再来查. ...

  10. IBatis.net动态SQL语句

    在学习动态SQL语句之前,首先必须对条件查询有一定了解,先来学习如何向IBatis.Net的映射文件里传入参数. 一.条件查询 1.传递单个参数 如根据Id查询: <select id=&quo ...