Bootstrap 媒体对象 列表组

最新推荐文章于 2023-07-22 10:41:46 发布
最新推荐文章于 2023-07-22 10:41:46 发布
阅读量226 收藏
点赞数
分类专栏： 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>
dxm809
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 组件：媒体对象组件（media）
WangMin@汪末末
09-07 2777
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 在web页面中，图片居左，内容居右排列（图片居右，内容居左排列），是非常常见的效果，它也就是媒体对象，它是一种抽象的样式，可以用来构建不同类型的组件。 默认样式 默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。 媒体对象一般是成组出现，一组媒体对象一般包括以下几部分： 1、媒体对象的容器：用来容纳媒体对象的所有内容，容器上需使用类名.media 2、媒体对
Bootstrap媒体对象的实现
09-02
Bootstrap媒体对象是网页布局中一个强大的工具，尤其适用于创建图文并茂的内容，如博客文章、评论等。在Bootstrap框架中，媒体对象是一个预定义的样式，可以帮助开发者轻松地实现图片或其它媒体元素与文本内容的对齐...
Bootstrap系列之媒体对象（Media object）
老__L的博客
06-15 1183
媒体对象（Media object）
3.17 Bootstrap 多媒体对象(Media Object)
最新发布
梁辰兴的博客
07-22 176
本章我们将讲解 Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。
Bootstrap(媒体对象&表格&模态框&图标)
weixin_56996467的博客
04-03 499
一、媒体对象 HTML代码： <div class="media"> <img src="img/1.png" class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0"><b>冷间谍</b></h5> <p>书籍价格:9.9</p> <p>作者:大黄</p> <p>
Bootstrap快速入门之媒体对象&表格&模态框&图标&滚动监听
m0_67768699的博客
05-03 749
案例1：实现搜索书籍页面 1.什么是媒体对象 2.列表媒体示例 案例2：实现购物车页面布局 1.表格样式 2.表格样式示例 案例3：实现购物车页面订单信息 1.模态框的工作原理 2. 模态框示例 ​ 案例4：图标组件的使用 导入图标插件实现图标（常规图标示例） ​ 案例5：滚动监听 1.什么是滚动监听 2.滚动监听的工作原理 3.在navbar导航中的示例
Bootstrap源码解读媒体对象、列表组和面板（10）
08-31
主要源码解读了Bootstrap媒体对象、列表组和面板,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
老生常谈Bootstrap媒体对象
12-10
本文将详细介绍Bootstrap媒体对象 默认样式 媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分： :ballot_box_with_check: 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容 :...
Bootstrap每天必学之媒体对象
09-03
Bootstrap中的媒体对象（Media Object）是一个强大的布局工具，用于创建常见的内容排列模式，如左侧或右侧带有图片，而文字内容则在相对的一侧。这种设计模式常见于文章、评论、用户资料等场景，使得视觉上更加和谐...
Bootstrap 多媒体对象
书香水墨
07-24 515
一、Bootstrap 多媒体对象 1.1 基础多媒体对象 要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: <div class="container mt-3"> <div class="media border p-3"> ...
Bootstrap媒体对象列表
歪脖先生的博客
05-23 1017
媒体列表 媒体列表，就是媒体的列表。由于媒体列表可以嵌套，因此很适合展示评论或其他需要以列表展示的信息。 媒体列表由 .media-list 的容器创建，其中包含一个或多个 .media。由于它是列表，适合使用列表元素来定义。如，使用 <ul> 创建 .media-list，使用 <li> 创建 .media： <ulclass="media-lis...
Bootstrap组件之媒体对象
bboyjoe的博客
08-01 3717
.media——指定该元素包裹媒体对象组件； .media-left——设置媒体对象的多媒体内容居左； .media-right——设置媒体对象的多媒体内容居右； .media-middle——设置媒体对象的多媒体内容上下居中； .media-bottom——设置媒体对象的多媒体内容居底； .media-body——设置媒体对象的文本内容部分； .meida-heading——设置h4
bootstrap-媒体对象的嵌套
weixin_34206899的博客
05-26 130
1.运行效果如图所示2.实现代码如下<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <title>媒体对象的嵌套&l...
BootStrap4布局系列之媒体对象
爱喝水的qdy的博客
11-25 1012
目录官方地址菜鸟教程地址ntp.org文档地址基本结构右展示媒体内容调整HTML顺序通过order媒体内容对齐align-self-startalign-self-centeralign-self-end媒体嵌套媒体列表 官方地址 https://v4.bootcss.com/docs/4.3/components/media-object/ 菜鸟教程地址 https://www.runoob.c...
深入理解BootStrap Item15 -- 媒体对象(media)
小平果的欢乐谷
11-18 2306
在Web页面或者说移动页面制作中，常常看到这样的效果，左边居左（或居右），内容居右（或居左）排列，如下图所示：我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍。其对应的版本文件：☑ LESS版本：对应的源文件是media.less☑ Sass版本：对应的源文件是
Bootstrap源码解读（第十弹：媒体对象、列表组和面板）
艺术就是爆炸的专栏
12-24 870
媒体对象 基础媒体对象 例如： div class="media"> a class="pull-left" href="#"> img class="media-object" src="http://placehold.it/350x150" alt="..."> a> div class="media-body"> h4 clas
bs缩略图、警告框、进度条、媒体对象、列表组、面板
Jinming Su
11-29 1031
缩略图 警告框 添加 .alert-dismissable 实现可关闭 警示框中添加连接 <a href="#" class="alert-link">this important alert message</a> 进度条 <div class="progress"> <div class="progress-bar" style="width:40%"> </
Bootstrap 媒体列表
歪脖先生的博客
03-11 1667
媒体列表顾名思义，媒体列表就是媒体的列表，媒体列表的每个列表项都是一个独立的媒体。由于媒体列表可以嵌套，因此很适合展示评论或其他需要以列表展示的信息。定义媒体列表，只需一个 class="media-list" 的列表，并把每个 &lt;li&gt; 子元素定义为一个媒体即可。如：&lt;ul class="media-list"&gt;  &lt;li class="media"&gt;    ..
BootStrap 媒体对象
刚哥的博客
07-21 1139
媒体对象可以包含图片、视频或者音频等媒体，以达到对象和文本组合显示的样式效果 基本示例                                 红杏                      杏（学名：Armeniaca vulgaris Lam.）落叶乔木。地生，植株无毛。叶互生，阔卵形或圆卵形叶子，边缘有钝锯齿；近叶柄顶端有二腺体；淡红色花单生或2-3个同生
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值