bootstrap留言板-包含展示和留言两部分_bootstrap留言板模板,bootstrap留言板资源-CSDN文库

共24个文件

js：5个

css：5个

xml：4个

3星 · 超过75%的资源需积分: 46 122 浏览量 2016-06-22 22:22:30 上传评论 3 收藏 282KB RAR 举报

Bootstrap 留言板是一种利用流行的前端框架Bootstrap构建的交互式网页组件，主要功能是提供一个用户可以查看他人留言并提交自己留言的平台。Bootstrap是一个响应式设计框架，它简化了网页开发，使得创建美观且适应不同设备的界面变得更加容易。在本文件中，这个留言板系统分为两个主要部分：留言展示和留言功能。留言展示部分通常会显示已有的留言记录，包括留言内容、作者信息以及可能的时间戳。这些信息通常以卡片（card）的形式呈现，卡片是一种Bootstrap组件，可以方便地包装内容并添加样式。卡片内部可能包括用户头像、用户名、留言文本以及时间戳等元素，以清晰地展示每一条留言的信息。留言功能则涉及用户提交新留言的表单。Bootstrap提供了各种表单控件，如输入框（input）、文本区域（textarea）用于用户输入留言内容，按钮（button）用于提交操作。表单通常会有一个明确的提交按钮，点击后将触发后台处理，例如通过AJAX异步提交，这样可以保持页面的流畅性，不让整个页面刷新。在回复功能方面，Bootstrap留言板可能会有嵌套评论的设计，即用户可以直接对某条留言进行回复。这可以通过折叠/展开机制实现，用户点击回复按钮后，下方会弹出一个新的回复表单。这样的设计增加了交互性和可读性，让用户更容易参与到讨论中。此外，界面效果不错意味着开发者在CSS样式上也下了一番功夫，利用Bootstrap的预定义样式和自定义CSS来优化视觉体验。可能包括适当的间距、颜色搭配、过渡动画等，以提升用户体验。在实际应用中，这个留言板可能还需要包含其他功能，如登录/注册、验证码验证、防止重复提交等。这些功能可以通过JavaScript或者与后端服务器的交互来实现。后端技术通常包括PHP、Node.js、Python等，它们负责处理用户请求，存储和检索数据，以及验证用户输入的安全性。这个基于Bootstrap的留言板源码是一个很好的学习资源，可以帮助开发者了解如何利用Bootstrap构建交互式的Web应用，同时也可以作为一个基础模板，根据需求进行定制和扩展。通过分析和研究这个项目，我们可以提升自己的前端技能，尤其是对于响应式设计和交互功能的理解。

资源推荐

资源详情

资源评论

收起资源包目录

留言板.rar （24个子文件）

留言板

css

main.css 2KB

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

index.html 4KB

jquery-1.12.3.min.js 95KB

main.js 464B

.idea

misc.xml 599B

vcs.xml 164B

.name 9B

modules.xml 270B

留言板.iml 281B

workspace.xml 14KB

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css"href="bootstrap-3.3.5-dist/css/bootstrap.css"> <link rel="stylesheet" type="text/css"href="css/main.css"> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <div class="ylcon"> <div class="tit"> <div class = "aut_na"> <span >评论列表</span> </div> <div class="btn-group btn-group-xs edit_ri" role="group" aria-label="..."> <button type="button" class="btn btn-default">我要留言</button> </div> </div> <div id="messDivId"> <div class="story"> <div class="opbtn"></div> <div class="m_top"> <div class = "aut_na"> <h4><strong>繁星点点</strong>   </h4> </div> <div class="btn-group btn-group-xs edit_ri" role="group" aria-label="..."> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> 回复</button> </div> </div> <p class="story_time">2015/07/12 20:48</p> <p class="story_m">为什么要追求bootstrap样式？</p> </div> <div class="story"> <div class="opbtn"></div> <div class="m_top"> <div class = "aut_na"> <h4><strong>管理员</strong>   </h4> </div> <div class="btn-group btn-group-xs edit_ri" role="group" aria-label="..."> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> 回复</button> </div> </div> <p class="story_time">2015/07/13 8:12</p> <p class="story_m">Bootstrap是一个兼容性强，操作开发简单的前端框架。</p> <p class="story_hf"><strong>@繁星点点</strong><small>(2015/07/12 20:48)</small>:为什么要追求bootstrap样式？</p> </div> <div class="story"> <div class="opbtn"></div> <div class="m_top"> <div class = "aut_na"> <h4><strong>狂澜</strong>   </h4> </div> <div class="btn-group btn-group-xs edit_ri" role="group" aria-label="..."> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> 回复</button> </div> </div> <p class="story_time">2016/02/10 13:23</p> <p class="story_m">渣渣路过</p> <p class="story_hf"><strong>@管理员</strong><small>(2015/07/13 8:12)</small>:Bootstrap是一个兼容性强，操作开发简单的前端框架。</p> </div> </div> </div>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <form role="form" id="edit_form"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">留言板</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="name">昵称</label> <input id="name" class="form-control"/> </div> <div class="form-group"> <label for="content">内容</label> <textarea id="content" class="form-control" rows="3"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="sub_btn">完成</button> </div> </div> </form> </div> </div> </body> </html>

评论收藏

内容反馈