<!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. 《互联网+：从IT到DT》：阿里公关稿，数据与案例不够全面客观，电商部分有一些生动的例子，三星

    本书是阿里研究院的集体创作,当然要从阿里的视角写,因此其他的互联网巨头的信息很少涉及,对阿里不利的案例很少涉及. 关于“互联网+”,关于“互联网+”跟互联网的区别,书的开头有一点介绍.我感觉总体来说直 ...

  2. putty 访问 vmware中ubuntu 方法

     putty访问虚拟机   从宿主机中用putty连接虚拟机中的Ubuntu. putty默认使用ssh方式连接,这需要在Ubuntu Server中安装ssh服务.使用命令sudo apt-get ...

  3. 第五章 使用 Bootstrap Typeahead 组件（百度下拉效果）

    推荐链接:http://www.cnblogs.com/haogj/p/3376874.html UnderScore官网:http://underscorejs.org/ 参考文档:http://w ...

  4. Swift3.0 iOS获取当前时间 - 年月日时分秒星期

    Swift3.0 iOS获取当前时间 - 年月日时分秒星期func getTimes() -> [Int] { var timers: [Int] = [] // 返回的数组 let calen ...

  5. 完成一个MVC+Nhibernate+Jquery-EasyUI信息发布系统

    一.最近学习了Jquery-EasyUI框架,结合之前用过的MVC3+Nhibernate做一个信息发布系统,对工作一年半的自己做一个总结吧!(也正好 供初学者学习!) 二.先上截图(系统简介),让大 ...

  6. CSS 实现加载动画之五-光盘旋转

    今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...

  7. 【兄弟连】2016高洛峰新版PHP培训视频教程

    [兄弟连]2016高洛峰新版PHP培训视频教程                                                            视频部分目录: 下载地址:http ...

  8. PagerIndicator主题样式修改

    默认的黑色好丑 所以大家需要动手改造一下, 1 打开 Manifest.xml <activity android:name="com.zb.zhihuianyang.MainActi ...

  9. java 顺序 读写 Properties 配置文件

    java 顺序 读写 Properties 配置文件 支持中文 不乱码 java 顺序 读写 Properties 配置文件 ,java默认提供的Properties API 继承hashmap ,不 ...

  10. Qt中通过ui怎么引用不了pushbutton呢？ 原来是这样…

    在Qt中打开一个项目在做, 突然想到要测量一下其中一个子系统,于是在当前环境下新建了一个项目并用qt designer 简单设计了一下ui,其中添加了pushbutton并命名为OpensourceB ...