bootstrap列表组、面板、和嵌入组件
来源:互联网 发布:淘宝主播怎么合作 编辑:程序博客网 时间:2024/05/21 17:17
学习笔记
一.列表组组件
列表组组件用于显示一组列表的组件。
//基本实例
<ul class="list-group">
<li class="list-group-item">1.这是起始</li>
<li class="list-group-item">2.这是第二条数据<span class="badge">10</span></li>
<li class="list-group-item">3.这是第三排信息</li>
<li class="list-group-item">4.这是末尾</li>
</ul>
//列表项带勋章
<li class="list-group-item">1.这是起始<span class="badge">10</span></li>
效果
//链接和首选 其实就是讲ul换做div,将li换做a
<div class="list-group">
<a href="#" class="list-group-item active">1.这是起始<span class="badge">10</span></a>
<a href="#" class="list-group-item">2.这是第二条数据</a>
<a href="#" class="list-group-item">3.这是第三排信息</a>
<a href="#" class="list-group-item">4.这是末尾</a>
</div>
效果:
//按钮式列表
<div class="list-group">
<button class="list-group-item active">1.这是起始 <spanclass="badge">10</span></button>
<button class="list-group-item">2.这是第二条数据</button>
<button class="list-group-item">3.这是第三排信息</button>
<button class="list-group-item">4.这是末尾</button>
</div>
//设置项目被禁用
class="list-group-item disabled"
//情景类
<li class="list-group-item list-group-item-success">3.这是第三排信息</li>
效果:
<div class="list-group">
<button class="list-group-item active">1.这是起始 <spanclass="badge">10</span></button>
<button class="list-group-item disabled">2.这是第二条数据</button>
<button class="list-group-item list-group-item-success">3.这是第三排信息</button>
<button class="list-group-item">4.这是末尾</button>
</div>
//定制内容
<div class="list-group">
<a href="#" class="list-group-item active">
<h4>内容标题</h4>
<p class="list-group-item-text">这里是相关内容详情!</p>
</a>
<a href="#" class="list-group-item">
<h4>内容标题</h4>
<p class="list-group-item-text">这里是相关内容详情!</p>
</a>
<a href="#" class="list-group-item">
<h4>内容标题</h4>
<p class="list-group-item-text">这里是相关内容详情!</p>
</a>
</div>
效果:
二.面板组件 (用途:例如登录弹框)
面板组件就是一个存放内容的容器组件。
//基本实例
<div class="panel panel-default">
<div class="panel-body">
这里是详细内容区!
</div>
</div>
//带标题容器的面板
<div class="panel panel-default">
<div class="panel-heading">
面板标题
</div>
<div class="panel-body">
这里是详细内容区!
</div>
</div>
//也可以设置标题元素
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-footer">
这里是底部
</div>
/情
景效果:default、success、info、warning、danger、primary
<div class="panel panel-success">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这里是面板详细内容区!
</div>
<!-- //表格类面板 -->
<table class="table">
<tr>
<th>与面板无缝连接的表格</th>
<th>直接嵌套在面板里面使用表格即可</th>
<th>3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<!-- //列表类面板 -->
<ul class="list-group">
<li class="list-group-item">这是列表结合面板</li>
<li class="list-group-item">2.这里是第二个项目</li>
<li class="list-group-item">3.这里是第三个项目</li>
<li class="list-group-item">4.这里是第四个项目</li>
</ul>
<div class="panel-footer">
这里是面板底部
</div>
</div>
效果:
三.响应式嵌入组件(例如插入一个视频)
根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定内容的尺寸,能够在各种设备上缩放。这些规则可以直接用于<iframe>、<embed>、<video>和<object>元素。
具体表现为显示比例岁浏览器的大小变化而变化;目前就两个比例有用,即16:9和4:9
//16:9 响应式
<div class="embed-responsive embed-responsive-16by9">
<embed width="400" height="300" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resource Id=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
</embed>
</div>
//4:3 响应式
<div class="embed-responsive embed-responsive-4by3">
<embed width="400" height="300" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resource Id=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
</embed>
</div>
- bootstrap列表组、面板、和嵌入组件
- Bootstrap-列表组面板和嵌入组件
- Bootstrap列表组、面板和响应式嵌入组件
- 第十二章.列表组和面板和嵌入组件
- Bootstrap组件学习笔记(七)——列表组和面板
- [学习笔记] bootstrap (九) :布局组件[缩略图,警告,进度条,多媒体列表,列表组,面板,wells]
- bootstrap列表组组件
- 3.8Bootstrap学习组件篇之进度条、媒体对象、列表组、面板
- bootstrap-警告框/进度条/列表组/面板
- Bootstrap组件之面板
- BootStrap 面板组件
- Bootstrap组件之列表组
- Bootstrap源码解读(第十弹:媒体对象、列表组和面板)
- Bootstrap——警告,进度条,列表组,面板,Well
- BootStrap 响应式嵌入组件
- bootstrap响应式嵌入组件
- BootStrap 列表组件
- bootstrap列表,上传组件
- VS2015配置OpenCV3.2
- Python-MongoDB常用操作
- atoi()函数
- 神奇的traits
- 丑数 UVa 136
- bootstrap列表组、面板、和嵌入组件
- Idea 设置显示当前方法参数提示
- 3.7 应用实例
- 企业常见系统运维面试题
- 5css的文字与字体
- glassfish4.1 简单操作
- Android的Listview优化
- QAudioOutput放到次线程中
- 【PAT】【Advanced Level】1033. To Fill or Not to Fill (25)