<!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. css shorthand属性简写

    一.什么是shorthand 属性简写(shorthand)就是一次性声明一组相关的属性.好处呢当然是众所周知的,让css从臃肿无序升级为简洁有效具有高可读性. 大多数的人都使用属性简写,我也用,但是 ...

  2. uva 1152 4 values whose sum is zero ——yhx

    The SUM problem can be formulated as follows: given four lists A;B;C;D of integer values, computehow ...

  3. OpenStack overview 笔记

    Example architecture example architecture 至少需要两个节点启动一个虚拟机或者实例.可选的服务,例如Block storage和Object storage需要 ...

  4. HDU 4455 Substrings --递推+树状数组优化

    题意: 给一串数字,给q个查询,每次查询长度为w的所有子串中不同的数字个数之和为多少. 解法:先预处理出D[i]为: 每个值的左边和它相等的值的位置和它的位置的距离,如果左边没有与他相同的,设为n+8 ...

  5. UVA 439 Knight Moves --DFS or BFS

    简单搜索,我这里用的是dfs,由于棋盘只有8x8这么大,于是想到dfs应该可以过,后来由于边界的问题,TLE了,改了边界才AC. 这道题的收获就是知道了有些时候dfs没有特定的边界的时候要自己设置一个 ...

  6. JS的构造及其事件注意点总结

    一:js的组成 ECMAscript bom dom 类型包括: number boolean  string undefined  object function 二:基本函数作用 parseInt ...

  7. cygwin下的vim 的vimrc配置

    1.一直接照 vim 在linux的配置使用 cygwin下的 vi. vim --version 之后,出现了帮助...

  8. 使用EXISTS语句注意点

    1.使用EXISTS语句,其目标列一般用“*”,因为带EXISTS的子查询只返回真值或假值,给出列名无实际意义. 2.使用EXISTS语句一定要注意上下两个表之间要建立联系. 例如,查询所有选修了1号 ...

  9. 25个实用的jquery技巧

    1. 去除页面的右键菜单   $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse; ...

  10. jenkins配置记录（2）--代码发布流程

    在我们的日常运维工作中,使用jenkins来完成业务代码发版上线是至关重要的一环.前面已经提到在jenkins上添加用户权限的操作,今天重点说下如何在jenkins下构建项目工程进行代码发布? 在此简 ...