bootstrap评论列表模板_bootstrap评论资源-CSDN文库

共22个文件

css：5个

js：4个

png：3个

4星 · 超过85%的资源需积分: 48 15 浏览量 2017-10-30 19:11:14 上传评论 1 收藏 336KB ZIP 举报

Bootstrap评论列表模板是一种基于Bootstrap框架设计的网页元素，用于展示用户评论或反馈。Bootstrap是由Twitter开发的一个开源前端框架，它提供了丰富的预定义样式、组件和JavaScript插件，以简化网页开发，实现响应式布局和移动设备优先的设计理念。在Bootstrap评论列表模板中，主要包含以下几个关键知识点： 1. **响应式设计**：Bootstrap的核心特性之一是响应式布局，这意味着评论列表将自动适应不同的屏幕尺寸，无论是手机、平板还是桌面电脑，都能提供良好的用户体验。这通常通过使用栅格系统（Grid System）来实现，通过调整列宽（cols）和断点（breakpoints）来定义不同设备上的显示方式。 2. **卡片组件（Card）**：评论可能被封装在Bootstrap的卡片组件中，卡片是一个自包含的、灵活的内容容器，可以包含图片、标题、文本等，非常适合构建评论列表。卡片可以通过添加类 `.card` 和 `.card-body` 来创建，每个评论作为一个独立的卡片展示。 3. **媒体对象（Media Object）**：Bootstrap的媒体对象可以帮助组织评论中的用户头像、用户名和评论内容，使它们对齐美观。通过使用 `.media` 类和 `.media-body` 类，可以轻松创建这种结构。 4. **列表组（List Group）**：评论内容可以用列表组组件来展示，这是一个简洁的、可扩展的列表容器。通过添加 `.list-group` 类，然后在其中嵌套 `.list-group-item` 类的元素，可以创建一个风格化的评论列表。 5. **字体图标（Font Awesome 或 Glyphicons）**：为了增加视觉效果，模板可能使用了如Font Awesome或Glyphicons这样的图标库，这些图标可以用来表示用户情绪、点赞或回复等交互功能。 6. **折叠/展开功能**：为了节省空间，评论列表可能会有折叠/展开功能，允许用户点击以查看或隐藏评论详情。这通常通过Bootstrap的折叠组件（Collapse）实现，通过`.collapse`和`data-toggle="collapse"`属性来控制。 7. **颜色和样式**：Bootstrap提供了一套预设的颜色方案和样式类，如`.text-primary`、`.bg-light`等，用于区分不同用户的评论或者突出重要的评论。 8. **JavaScript插件**：如果模板包含动态交互，比如点赞、回复或加载更多评论，那么可能需要用到Bootstrap的JavaScript插件，如`.collapse`、`.tooltip`或`.modal`等。 9. **自定义CSS**：虽然Bootstrap提供了丰富的样式，但为了满足特定的设计需求，模板可能还会包含自定义CSS代码，用于调整颜色、间距、字体大小等细节。 10. **SEO优化**：一个优秀的模板还应该考虑搜索引擎优化（SEO），例如合理使用`<h1>`到`<h6>`标签、`<meta>`标签以及结构化数据标记，帮助搜索引擎更好地理解页面内容。在实际应用中，开发者需要根据具体需求对模板进行适当的定制，包括但不限于调整颜色主题、添加额外的功能、整合后端数据等，以创建出符合项目需求的评论列表。同时，了解和熟练掌握Bootstrap的使用，能够大大提高开发效率和网页的质量。

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap评论列表静态模板.zip （22个子文件）

bootstrap评论列表静态模板

css

img

a.png 8KB

c.png 7KB

b.png 6KB

main.css 4KB

bootstrap-3.3.5-dist

css

bootstrap-theme.css 26KB

bootstrap.css.map 381KB

bootstrap.min.css 120KB

bootstrap.css 144KB

bootstrap-theme.min.css 23KB

bootstrap-theme.css.map 47KB

fonts

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.svg 106KB

npm.js 484B

bootstrap.min.js 36KB

bootstrap.js 67KB

.DS_Store 6KB

index.html 9KB

jquery-1.12.3.min.js 95KB

.DS_Store 6KB

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/main.css" rel="stylesheet" type="text/css"> <meta keyword="www.niubai.net.cn"> </head> <body> <h3>这是一个留言页面</h3> <div class="row"> <div class="col-md-9"> <ul class="media-list"> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="css/img/a.png" alt="广丰"> </a> </div> <div class="media-body"> <h4 class="media-heading">风往北吹</h4> <p>爱赞了，这个插件真好用.....我看看他的评论模块好看不www.niubai.net.cn</p> <div class="ds-comment-footer"> <span class="ds-time" datetime="2016-01-28T20:13:29+08:00" title="2016年1月28日下午8:13:29">2016年1月28日</span>  <a> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 回复 </a> </div> <hr/> <ul class="media-list"> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="css/img/b.png" alt="牛逼"> </a> </div> <div class="media-body"> <h4 class="media-heading">网名为空</h4> <p>你看看这个评论的插件如何，可以拿来作为我博客的评论伯曼吗？可以得花，我就给群主说，让他给我源码。</p> <div class="ds-comment-footer"> <span class="ds-time" datetime="2016-01-28T20:13:29+08:00" title="2016年1月28日下午8:13:29">2016年2月8日</span>  <a> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 回复 </a> </div> </div> </li> <hr/> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="css/img/b.png" alt="牛逼"> </a> </div> <div class="media-body"> <h4 class="media-heading">网名为空</h4> <p>你看看这个评论的插件如何，可以拿来作为我博客的评论伯曼吗？可以得花，我就给群主说，让他给我源码。</p> <div class="ds-comment-footer"> <span class="ds-time" datetime="2016-01-28T20:13:29+08:00" title="2016年1月28日下午8:13:29">2016年2月8日</span>  <a> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 回复 </a> </div> </div> </li> </ul> </div> </li> <hr/> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="css/img/c.png" alt="菜鸟"> </a> </div> <div class="media-body"> <h4 class="media-heading">菜鸡一枚我不哭</h4> <p>呵呵，楼上的真搞笑，这个评论模板的插件好丑陋，简直丑爆了，我简单做的都比这个好，信不信，我分分钟肥腻做出来一个，吓屎你们这群都比</p> <div class="ds-comment-footer"> <span class="ds-time" datetime="2016-01-28T20:13:29+08:00" title="2016年1月28日下午8:13:29">2016年5月10日</span>  <a> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 回复 </a> </div> </div> </li> <hr/> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="css/img/a.png" alt="广丰"> </a> </div> <div class="media-body"> <h4 class="media-heading">风往北吹</h4> <p>爱赞了，这个插件真好用.....我看看他的评论模块好看不</p> <div class="ds-comment-footer"> <span class="ds-time" datetime="2016-01-28T20:13:29+08:00" title="2016年1月28日下午8:13:29">2016年1月28日</span>  <a> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 回复 </a> </div> <hr/> <ul class="media-list"> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="css/img/b.png" alt="牛逼"> </a> </div> <div class="media-body"> <h4 class="media-heading">网名为空</h4> <p>你看看这个评论的插件如何，可以拿来作为我博客的评论伯曼吗？可以得花，我就给群主说，让他给我源码。</p> <div class="ds-comment-footer"> <span class="ds-time" datetime="2016-01-28T20:13:29+08:00" title="2016年1月28日下午8:13:29">2016年2月8日</span>  <a> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 回复 </a> </div> <hr/> <ul class="media-list"> <li class="media"> <div class="media-left"> <a href="#"> <img class="media-object img-circle" src="css/img/b.png" alt="牛逼"> </a> </div> <div class="media-body"> <h4 class="media-heading">网名为空</h4> <p>你看看这个评论的插件如何，可以拿来作为我博客的评论伯曼吗？可以得花，我就给群主说，让他给我源码。</p>

评论收藏

内容反馈

wangbingqi

2020-08-05

还可以，能还凑合着用
TecsonChan

2018-06-28

不错，适合我使用。
iwhwws

2018-09-14

https://download.csdn.net/download/u013611978/9614360 我想知道你是不是下载他的然后又你上传??
lokck

2019-06-03

还行，基础的