Bootstrap 媒体对象 列表组
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Bootstrap3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Bootstrap3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="~/img/1.jpg" alt="..." width="100" height="100">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="badge">1</span>
Morbi leo risus
</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Hello world</p>
</a>
</div>
</body>
</html>
Bootstrap 媒体对象 列表组的更多相关文章
- 详解Bootstrap媒体对象
在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.l ...
- Bootstrap媒体对象
前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...
- 测开之路一百一十三:bootstrap媒体对象
实现效果,左边是图片或者其他媒体,右边是对应的描述 引入bootstrap和jquery标签 class="media" 数量多一些看着就会很规整 <!DOCTYPE htm ...
- BootStrap学习(5)_多媒体对象&列表组
一.多媒体对象 这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. .media: ...
- 移动web——bootstrap媒体对象
基本模板 1.这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等) <div class="media"> <div class ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap 进度条媒体对象和 Well 组件
一.Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
- Bootstrap(10) 进度条媒体对象和 Well 组件
一.Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...
- 第二百四十一节,Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
随机推荐
- [CSS Flex] Justify-content
justify content contol how element inside flex box align, it can be "right / end", or &quo ...
- [Angular] ChangeDetection -- onPush
To understand how change detection can help us improve the proference, we need to understand when it ...
- C# WebQQ协议群发机器人(一)
原创性申明 本文地址 http://blog.csdn.net/zhujunxxxxx/article/details/38931287 转载的话请注明出处. 之前我也写过一篇使用python来实现的 ...
- 【转】dbx用法讲解
http://blog.chinaunix.net/uid-25544300-id-328735.html dbx 命令 用途 提供了一个调试和运行程序的环境. 语法 dbx [ -a Process ...
- 【codeforces 752F】Santa Clauses and a Soccer Championship
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
- 编程马拉松大赛试题及代码(C++实现)
前段时间牛客网举办了编程马拉松大赛,总共86道题,20天内完毕. 题目难度难中易都有.我发现这些题目,主要关注性能和思维. 非常多题目用常规方法是不能通过时间要求的.题目是来自于各大oj以及面试题.所 ...
- iOS app审核参考信息地址
发件人:(苹果开发支持邮箱地址) 中国区电话:400-670-1855 chinadev<chinadev@asia.apple.com> 您好: 感谢您与 Apple 开发者计划支持 ...
- iOS 取消多余tableView的横线的写法
- (void)setExtraCellLineHidden: (UITableView *)tableView{ UIView *view =[ [UIView alloc]init]; view. ...
- cordova APP 检查更新
原文:cordova APP 检查更新 //升级程序 .factory('UpdateService', function ($rootScope, $cordovaAppVersion, $cord ...
- 【63.63%】【codeforces 724A】Checking the Calendar
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...