Bootstrap 多媒体

最新推荐文章于 2022-08-04 21:08:24 发布
最新推荐文章于 2022-08-04 21:08:24 发布
阅读量360 收藏
点赞数
分类专栏： Bootstrap 前端 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cql_k21/article/details/86772162
版权 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8"><!--设置字符集utf-8编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示-->
    <title>ChapterSevenMedia--第七章媒体对象</title>
    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <!--媒体对象-->
        <!--在Web页面或者说移动页面制作中，常常看到这样的效果，图片居左（或居右），
            内容居右（或居左）排列-->
        <!--我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。
            这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍-->
        <div class="h4 text-center">---------------------------------------媒体对象--默认媒体对象-----------------------------------------</div>
        <!--媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：
            ☑  媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
            ☑  媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
            ☑  媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，
                可以是任何元素，常常是图片侧边内容
            ☑  媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选-->
        <div class="h4">媒体对象--默认媒体对象</div>
        <div class="media">
            <a class="pull-left" href="#"><img class="media-object" src="~/Content/images/bootstrap.png" alt="bootstrap" style="width:160px;height:120px;" /></a>
            <div class="media-body">
                <h4 class="media-heading">Bootstrap框架系列教程</h4>
                <div>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站..</div>
            </div>
        </div> 

        <div class="h4 text-center">---------------------------------------媒体对象--媒体对象的嵌套-----------------------------------------</div>
        <!--媒体对象--媒体对象的嵌套-->
        <div class="h4">媒体对象--媒体对象的嵌套</div>
        <div class="media">
            <a class="pull-left" href="#"><img src="~/Content/images/avatar92.jpg" class="media-object" alt="" /></a>
            <div class="media-body">
                <h4 class="media-heading">我是大漠</h4>
                <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
                <div class="media">
                    <a class="pull-left" href="#"><img class="media-object" src="~/Content/images/0.jpg" alt="..."></a>
                    <div class="media-body">
                        <h4 class="media-heading">慕课网</h4>
                        <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
                        <div class="media">
                            <a class="pull-left" href="#"><img class="media-object" src="~/Content/images/1.jpg" alt="..."></a>
                            <div class="media-body">
                                <h4 class="media-heading">W3cplus</h4>
                                <div>W3cplus站上还有很多教程....</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h4 text-center">---------------------------------------媒体对象--媒体对象列表-----------------------------------------</div>
        <!--媒体对象--媒体对象列表-->
        <!--媒体对象的嵌套仅是媒体对象中一个简单应用效果之一，在很多时候，我们还会碰到一个列表，
        每个列表项都和媒体对象长得差不多，同样用评论系统来说事-->
        <!--使用方法：
        针对上图的媒体对象列表效果，Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，
        并且在ul上添加类名“media-list”，而在li上使用“media”-->
        <div class="h4">媒体对象--媒体对象列表</div>
        <ul class="media-list">
            <li class="media">
                <a class="pull-left" href="##"><img src="~/Content/images/maomao.JPG" class="media-object" alt="..." style="width:100px;height:120px;"/></a>
                <div class="media-body">
                    <h4 class="media-heading">我是大漠</h4>
                    <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
                </div>
            </li>
            <li class="media">
                <a class="pull-left" href="##"><img src="~/Content/images/maomao.JPG" class="media-object" alt="..." style="width:100px;height:120px;"/></a>
                <div class="media-body">
                    <h4 class="media-heading">我是大漠</h4>
                    <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
                </div>
            </li>
            <li class="media">
                <a class="pull-left" href="##"><img src="~/Content/images/maomao.JPG" class="media-object" alt="..." style="width:100px;height:120px;"/></a>
                <div class="media-body">
                    <h4 class="media-heading">我是大漠</h4>
                    <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

 

ClementQL
关注
专栏目录
Bootstrap 多媒体对象（Media Object）
01-19
Bootstrap 多媒体对象（Media Object） 本章我们将讲解 Bootstrap 中的多媒体对象（Media Object），如：图像、视频、音频等。 多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用...
bootstrap视频插件
06-02
使用这样的插件，开发者无需从零开始编写复杂的多媒体处理代码，而是可以直接嵌入到现有的Bootstrap项目中，快速实现视频播放功能。 在实际应用中，"willesPlay"可能会使用HTML5的`<video>`元素作为基础，通过...
Bootstrap多媒体对象
遇见更好的自己
06-13 923
1..media 允许将媒体对象里的多媒体（图像，视频，音频）浮动到内容块的左边或者右边 .media-list:各项内容是武学列表的一部分，可以使用该class。用于评论列表和文章列表<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="../images/1.jpg"
Bootstrap 多媒体对象
书香水墨
07-24 519
一、Bootstrap 多媒体对象 1.1 基础多媒体对象 要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: <div class="container mt-3"> <div class="media border p-3"> ...
Bootstrap 4 多媒体对象
weixin_45116096的博客
07-12 216
Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等: 基础多媒体对象 要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta char.
Bootstrap组件之媒体对象
bboyjoe的博客
08-01 3730
.media——指定该元素包裹媒体对象组件； .media-left——设置媒体对象的多媒体内容居左； .media-right——设置媒体对象的多媒体内容居右； .media-middle——设置媒体对象的多媒体内容上下居中； .media-bottom——设置媒体对象的多媒体内容居底； .media-body——设置媒体对象的文本内容部分； .meida-heading——设置h4
毕业设计，基于SSM+MyBatis+MySql+Bootstrap开发的多媒体英语学习网站，内含Java完整源代码，数据库脚本
最新发布
01-18
毕业设计，基于SSM+MyBatis+MySql+Bootstrap开发的多媒体英语学习网站，内含Java完整源代码，数据库脚本 JSP基于SSM多媒体英语学习网站设计可升级Springboot毕业源码案例设计 前台框架： Bootstrap(一个HTML5响应...
基于bootstrap开发的电子商城首页项目
05-06
3. **多媒体支持**：通过`<audio>`和`<video>`标签直接嵌入音频和视频，无需额外插件。 4. **离线存储**：利用`localStorage`和`sessionStorage`，可以实现数据的本地存储，提升用户体验。 **CSS3** 则带来了更强大...
bootstrap-fileinput 多组件多文件上传
fmi110的博客
08-04 2127
bootstrap-fileinput 多组件多文件上传。
Bootstrap 媒体对象
soindy
03-23 1510
整理自慕课笔记 在Web页面或者说移动页面制作中，常常看到这样的效果，左边居左（或居右），内容居右（或居左）排列，如下图所示： 我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。默认媒体对象媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分： * 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对
零基础Bootstrap入门教程(14)--媒体与媒体列表
程序员大阳
02-21 743
本文目录1. 概述2. 媒体实现3. 媒体列表4. 小结 1. 概述 看到媒体，不要误解，此处媒体不是指的单纯的图形、视频、音频等媒体形式，而是指的Bootstrap中提供的一种显示组件。 Bootstrap媒体一般由文字、图像构成，大多数情况下图像作为一个抽象代表，文字作为内容描述。 举个最常见例子，微信中的聊天会话就是一个典型的媒体，左侧是头像，右侧上方是微信名称，右侧下方是最新的消息内容。 接下来我们就来使用Bootstrap实现下媒体。 2. 媒体实现 我们以微信聊天会话为例实现下媒体。 首先，我们
Bootstrap 组件值多媒体对象(Media Object)
21号先锋者
02-09 356
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;duomeitiduixiang&lt;/title&gt;
Bootstrap 排版/列表页面
21号先锋者
02-07 2056
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;!--设置字符集utf-8编码--&gt; &lt;meta name="viewport" content="width=device-wi
Bootstrap 选项卡
21号先锋者
02-07 1886
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt;&lt;!--设置字符集utf-8编码--&gt; &lt;meta name="viewport" content="width=device-
Bootstrap 警告框(Alert)插件
21号先锋者
02-09 1677
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;jinggaokuang&lt;/title&gt;
Bootstrap 基本输入框
21号先锋者
02-08 1614
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;jibenshurukuangzu&lt;/title&gt;
Bootstrap 滚动监听(Scrollspy)插件
21号先锋者
02-09 818
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;gundongJianTing&lt;/title&gt;
Bootstrap面板与MediaObject详解：必备组件指南
二、Bootstrap多媒体对象（Media Objects） 多媒体对象主要用于展示图像、视频或音频等内容，同时包含相关的文本描述。在Bootstrap中，Media Object通过`<div class="media">`和嵌套的`<div class="media-left">`、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ClementQL

机会只属于对自己更狠的人。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值