BootStrap学习(5)_多媒体对象&列表组_html/css_WEB-ITnose
Jun 24, 2016 am 11:34 AM
一、多媒体对象
这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
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>
로그인 후 복사
效果:
二、列表组
列表组件用于以列表形式呈现复杂的和自定义的内容
- 添加 class .list-group。
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으로 문의하세요.

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7139
9


자바 튜토리얼
1534
14


라라벨 튜토리얼
1257
25


PHP 튜토리얼
1205
29


Cakephp 튜토리얼
1155
46



공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까?

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소?
