11月22日学习内容整理:bootstrap的常用组件补充
九、进度条
1、基本实例
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div>
2、带有提示标签的进度条
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div>
3、根据情境变化
4、条纹效果
5、动画效果
6、堆叠效果
十、媒体对象:场景类似与网页中的用户评论和回复功能
.pull-left
和 .pull-right
这两个类以前也曾经被用在了媒体组件上,但是,从 v3.3.0 版本开始,他们就不再被建议使用了。.media-left
和 .media-right
替代了他们,不同之处是,在 html 结构中, .media-right
应当放在 .media-body
的后面。
1、默认样式
<div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">Media heading</h4> ... </div> </div>
2、对齐
<div class="media"> <div class="media-left media-middle"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">Middle aligned media</h4> ... </div> </div>
头像的位置:
.media-left
.media-right
.media-middle --> 中间
.media-bottom --> 底部
.media-body代表内容
3、媒体对象列表
十一、列表组:列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。
1、基本实例
<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>
2、带徽章的列表组
‘
<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>
3、链接
4、按钮
5、被禁用的条目
6、情境类
7、定制内容
十二、面板:虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件。
1、基本实例
2、带标题的面板:
通过 .panel-heading
可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title
类的 <h1>
-<h6>
标签,添加一个预定义样式的标题。不过,<h1>
-<h6>
标签的字体大小将被 .panel-heading
的样式所覆盖。
为了给链接设置合适的颜色,务必将链接放到带有 .panel-title
类的标题标签内。
<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
3、带注脚的面板
4、情境效果
5、带表格的面板
6、带列表组的面板
十三、具有响应式特性的嵌入内容
根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow 的尺寸,能够在各种设备上缩放。
这些规则被直接应用在 <iframe>
、<embed>
、<video>
和 <object>
元素上。如果你希望让最终样式与其他属性相匹配,还可以明确地使用一个派生出来的 .embed-responsive-item
类。
超级提示: 不需要为 <iframe>
元素设置 frameborder="0"
属性,因为我们已经替你这样做了!
<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div>