BootStrap学习(5)_多媒体对象&列表组_html/css

一、多媒体对象

企鹅-标题

企鹅

用户1" >用户1

二、列表组

新闻2

首頁

web前端

html教學

BootStrap学习(5)_多媒体对象&列表组_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

一、多媒体对象

这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

1.基本多媒体对象

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>    <style type="text/css">        .media-object {        width:60px;        height:60px;        }    </style></head><body>    <div class="media">   <a class="pull-left" href="#">      <img class="media-object lazy"  src="/static/imghw/default1.png"  data-src="../Imgs/img1/1.jpg"        alt="媒体对象"/>   </a>   <div class="media-body">      <h4 id="企鹅-标题">企鹅-标题</h4>      这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。     </div></div><div class="media">   <a class="pull-left" href="#">     <img class="media-object lazy"  src="/static/imghw/default1.png"  data-src="../Imgs/img1/1.jpg"        alt="媒体对象"/>   </a>   <div class="media-body">      <h4 id="企鹅">企鹅</h4>      这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。       这是一个企鹅。这是一个企鹅。        这是一个企鹅。这是一个企鹅。     </div></div></body></html>

登入後複製

效果:

2.嵌套的媒体对象

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>    <style type="text/css">        .media-object {            width: 30px;            height: 30px;        }    </style></head><body>    <div class="media">        <a class="pull-left" href="#">            <img class="media-object lazy"  src="/static/imghw/default1.png"  data-src="../Imgs/img1/1.jpg"                 alt="媒体对象" />        </a>        <div class="media-body">            <h4 id="a-href-用户-a"><a href="#">用户1</a></h4>            今天的天气真好，空气清新，阳光明媚。       <div class="media">           <a class="pull-left" href="#">               <img class="media-object lazy"  src="/static/imghw/default1.png"  data-src="../Imgs/img1/1.jpg"                    alt="媒体对象" />           </a>           <div class="media-body">               <span class="media-heading"><a href="#">用户1:</a></span>               是啊，天气真好。           </div>       </div>            <div class="media">                <a class="pull-left" href="#">                    <img class="media-object lazy"  src="/static/imghw/default1.png"  data-src="../Imgs/img1/1.jpg"                         alt="媒体对象" />                </a>                <div class="media-body">                    <span class="media-heading"><a href="#">企鹅3:</a></span>                    嗯嗯，是的呢。                 </div>            </div>        </div>    </div></body></html>

登入後複製

效果:

二、列表组

列表组件用于以列表形式呈现复杂的和自定义的内容

向元素

.list-group

向
添加 class .list-group-item。
可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在
元素中添加即可

1.基本列表组

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body   style="max-width:90%">    <ul class="list-group">    <li class="list-group-item"><span class="badge">新</span>新闻1</li>   <li class="list-group-item"><span class="badge">荐</span>新闻2</li>   <li class="list-group-item">新闻3</li>   <li class="list-group-item">新闻4</li></ul></body></html>

登入後複製

效果:

2.向列表组添加链接

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body style="margin-top:20px;margin-left:20px;">       <a href="#" class="list-group-item"><span class="badge">新</span>新闻1</a>   <a href="#" class="list-group-item"><span class="badge">荐</span>新闻2</a>   <a href="#" class="list-group-item active">新闻3</a>   <a href="#" class="list-group-item">新闻4</a></body></html>

登入後複製

效果:

3.自定义内容

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body style="margin-top:20px;margin-left:20px;">       <div class="list-group">   <a href="#" class="list-group-item active">      <h4 id="新闻">         新闻      </h4>   </a>   <a href="#" class="list-group-item">      <h4 id="新闻">         新闻1      </h4>      <p class="list-group-item-text">         新闻内容新闻内容新闻内容新闻内容新闻内容......      </p>   </a>   <a href="#" class="list-group-item">      <h4 id="新闻">         新闻2      </h4>      <p class="list-group-item-text">         新闻2内容新闻2内容新闻2内容新闻2内容......      </p>   </a></div></body></html>

登入後複製

效果:

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7804

Java教學

1645

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。