<!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. check the element in the array occurs more than half of the array length

    Learn this from stackflow. public class test { public static void main(String[] args) throws IOExcep ...

  2. selenium验证车贷计算器算法

    1.验证页面上的车贷计算器算的结果是否与需求中给的公式结果一致. 页面图片: 代码如下(简单实现,需要优化): package com.test; import java.math.BigDecima ...

  3. 【读书笔记《Android游戏编程之从零开始》】9.游戏开发基础（如何快速的进入 Android 游戏开发）

    1.不可盲目看API文档很多人在接触学习一门新的平台语言时,总喜欢先去探究一番API文档.先不说成效如何,至少编者认为这种方式不适合大部分人来效仿,主要原因在于 API 领域广泛,牵涉到的知识点太多, ...

  4. J2EE笔记3

    7. MVC 设计模式. 6. 和属性相关的方法: 1). 方法 void setAttribute(String name, Object o): 设置属性 Object getAttribute( ...

  5. UVALive 6449 IQ Test --高斯消元？

    题意:给你一串数字,问这串数字符合f[n] = a*f[n-1],f[n] = a*f[n-1]+b*f[n-2],f[n] = a*f[n-1]+b*f[n-2]+c*f[n-3]这几个方程中的哪个 ...

  6. android ant 自动编译打包

    http://www.cnblogs.com/tankaixiong/archive/2010/11/24/1887156.html

  7. windows组件

    Wcript.shell是windows自带的组件 因为他过于强大 所以经常被黑客加以利用 他可以调用系统内核运行的dos基本命令 与此对应的还有三个危险组件 他们分别是 FSO shell.Appl ...

  8. 程序4-6 utime函数实例

    //http://blog.chinaunix.net/uid-24549279-id-71355.html /* ========================================== ...

  9. js模拟手机触摸屏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. jq 操作table

    转载于:http://www.jb51.net/article/34633.htm jquery获取table中的某行全部td的内容方法,需要的朋友可以参考一下   <table>< ...