<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>列表组面板和嵌入组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 100px;"> <!-- <ul class="list-group"> <li class="list-group-item">1.这是首页</li> <li class="list-group-item active">2.这是第二页 <span class="badge">10</span></li> <li class="list-group-item">3.这是第三页</li> <li class="list-group-item">4.这是第四页</li> </ul> <div class="list-group"> <a class="list-group-item">1.这是首页</a> <a class="list-group-item active">2.这是第二页 <span class="badge">10</span></a> <a class="list-group-item disabled">3.这是第三页</a> <a class="list-group-item list-group-item-success">4.这是第四页</a> </div> <div class="list-group"> <button class="list-group-item">1.这是首页</button> <button class="list-group-item active">2.这是第二页 <span class="badge">10</span></button> <button class="list-group-item">3.这是第三页</button> <button class="list-group-item">4.这是第四页</button> </div> <div class="list-group"> <a class="list-group-item"> <h4>列表标题</h4> <p>详细内容。。。</p> </a> <a class="list-group-item active">2.这是第二页 <span class="badge">10</span></a> <a class="list-group-item disabled">3.这是第三页</a> <a class="list-group-item list-group-item-success">4.这是第四页</a> </div> --> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">我是标题区域</h3> </div> <div class="panel-body"> 我是一个面板容器 </div> <div class="panel-footer"> 我是底部 </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">我是标题区域</h3> </div> <div class="panel-body"> 我是一个面板容器 </div> <table class="table"> <tr> <th>1</th> <th>2</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">1.这是首页</li> <li class="list-group-item active">2.这是第二页 <span class="badge">10</span></li> <li class="list-group-item">3.这是第三页</li> <li class="list-group-item">4.这是第四页</li> </ul> <div class="panel-footer"> 我是底部 </div> </div> <!--div class="embed-responsive embed-responsive-16by9"> <embed src="http://player.youku.com/player.php/sid/XMTQyMjc1MTg5Ng==/v.swf" allowFullScreen="true" quality="high" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> </div--> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图:
相关推荐
NULL 博文链接:https://onestopweb.iteye.com/blog/2266727
《响应式网页开发实战》教学教案—第15章 Bootstrap组件.pdf《响应式网页开发实战》教学教案—第15章 Bootstrap组件.pdf《响应式网页开发实战》教学教案—第15章 Bootstrap组件.pdf《响应式网页开发实战》教学教案—...
bootstrap样式控制的datetimepicker时间组件,分为bootstrap v2、bootstrap v3、bootstrap v4三个版本
前端开发利器bootstrap相关组件文件全集,包含需要的js文件、css文件等,解压即用
基于bootstrap封装的表格组件,调用方式类似与easyui。提供分页,条件查询、高级搜索。
其实bootstrap已经很好了,唯一的软肋就是js方面有些薄弱,对比easyui就知道了, 可以很明显的知道bootstrap是前端人员创建的,而easyui是偏后端人员创建的。 BootstrapQ 主要特性: 1.Bootstrap 常用组件封装,...
jQuery Bootstrap网格布局和列表布局切换代码
基于Vue.js和Bootstrap构建和响应式管理面板
bootstrap文件上传组件
列表组可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.less SASS:_list-group.scss ...
Bootstrap风格的组件源码是一个模板/引导/样板文件的应用程序,包括大量的优秀的开放源码工具和框架。不过据其他朋友反映这个和 Twitter的Bootstrap半毛钱关系也没有,只是长得比较像。这套源码的优点就是自定义的...
Axure8 的 Bootstrap4 组件库,已测试支持Axure RP 8,已包含常见功能,如:分页,所有样式的按钮,搜索框,日历等等。
Axure Bootstrap 3 组件 支持axure7.x 版本。
jQuery Bootstrap响应式新闻列表文字上下滚动特效
基于Bootstrap样式的分页组件
bootstrap-notifications, Bootstrap 框架的通知组件 用于 3的 通知组件 要开始,请查看 http://skywalkapps.github.io/bootstrap-notifications ...快速启动通知组件是为 Bootstrap 3构建的。 你有以下安装选项:下载
Bootstrap下的组件datagrid使用demo试例,简单易于消化!
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面....教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。