最好用的前台模板，纯html页面+css+bootstrap_学生考勤系统页面bootstrap实现纯HTML+js资源-CSDN下载

共323个文件

js：99个

html：91个

css：43个

HTML5

bootstrap

5星 · 超过95%的资源需积分: 47 179 浏览量 2018-08-16 16:06:17 上传评论 4 收藏 4.95MB RAR 举报

标题中的“最好用的前台模板”指的是一个优秀的前端开发框架，用于构建用户界面。这个框架是基于纯HTML、CSS和Bootstrap构建的。HTML（HyperText Markup Language）是网页内容的基础结构语言，它定义了网页的布局和内容。CSS（Cascading Style Sheets）则负责网页的样式设计，使页面具有丰富的视觉效果。Bootstrap是一个流行的开源前端框架，由Twitter开发，它提供了一系列预设的CSS类和JavaScript组件，使得开发者可以快速地创建响应式、移动优先的网站。描述中提到，这个压缩包包含的是纯前端的源码，这意味着它并不涉及后端编程，如服务器端语言（如PHP、Java或Node.js）。这使得该模板非常适合个人开发者或小型团队使用，他们可能只需要创建一些简单的、独立运行的网页项目，而无需与服务器进行复杂交互。标签中提到了HTML5、js和bootstrap。HTML5是HTML的最新版本，引入了许多新的元素和API，提升了网页的多媒体支持、离线存储以及更好的表单控制等功能。JavaScript（简称js）是网页开发中的主要脚本语言，它用于实现网页的动态交互，如响应用户的输入、操作DOM（Document Object Model）等。与HTML5和CSS结合，JavaScript可以创建出功能丰富的网页应用。压缩包内的文件名为“hplus”，这可能是一个特定的模板或者主题名称，通常这样的命名意味着它是一个完整的、预设计的布局方案，可能包含了各种页面模板（如首页、关于我们、联系我们等）、导航栏、下拉菜单、按钮、表单元素等，以及与Bootstrap兼容的CSS和JavaScript代码。使用这样的模板，开发者可以快速搭建出美观且响应式的网页，节省大量时间和精力。Bootstrap提供了栅格系统，便于响应式布局，使得网站在不同设备上都能良好显示。同时，它还包含了大量的可复用组件，如模态框、轮播图、提示信息等，这些都大大提高了开发效率。这个压缩包为前端开发者提供了一个快速开发网页的工具，通过HTML5的增强功能、CSS的美化和Bootstrap的便捷性，能够帮助开发者创建出专业且用户体验良好的小型网站。对于初学者来说，这是一个很好的学习资源，可以让他们快速掌握前端开发的基本技巧；对于有经验的开发者，这则是一个高效的工作流加速器，能够让他们专注于业务逻辑，而不是页面的布局和样式设计。

资源推荐

资源详情

资源评论

收起资源包目录

最好用的前台模板，纯html页面+css+bootstrap （323个子文件）

summernote-bs3.css 143KB

bootstrap.min.css 120KB

style.min.css 97KB

animate.min.css 46KB

datepicker3.css 33KB

font-awesome.min.css 26KB

ambiance.css 25KB

style.min.css 25KB

sweetalert.css 18KB

simditor.css 17KB

jasny-bootstrap.min.css 14KB

chosen.css 12KB

dropzone.css 11KB

layim.css 11KB

fullcalendar.css 11KB

summernote.css 10KB

plyr.css 10KB

codemirror.css 7KB

blueimp-gallery.min.css 7KB

awesome-bootstrap-checkbox.css 7KB

toastr.min.css 7KB

webuploader-demo.min.css 6KB

jquery.steps.css 6KB

footable.core.css 5KB

jquery.fancybox.css 5KB

dataTables.bootstrap.css 5KB

bootstrap-table.min.css 4KB

clockpicker.css 4KB

basic.css 4KB

bootstrap-colorpicker.min.css 3KB

cropper.min.css 3KB

ion.rangeSlider.css 3KB

jquery.nouislider.css 3KB

bootstrap-markdown.min.css 3KB

jquery.gritter.css 3KB

ion.rangeSlider.skinFlat.css 2KB

custom.css 1KB

bootstrap-treeview.css 1KB

fullcalendar.print.css 668B

switchery.css 610B

webuploader.css 515B

morris-0.4.3.min.css 442B

ui.jqgrid.css0820 16KB

.DS_Store 12KB

._.DS_Store 4KB

glyphicons-halflings-regular.eot 20KB

footable.eot 5KB

fontawesome-webfont.eot 67KB

glyphicons-halflings-regular.eot 20KB

footable.eot 5KB

[email protected] 14KB

fancybox_loading.gif 6KB

loading.gif 4KB

throbber.gif 2KB

loading-upload.gif 2KB

loading.gif 166B

blank.gif 43B

ie-spacer.gif 43B

fontawesome.html 136KB

glyphicons.html 76KB

form_advanced.html 57KB

index.html 51KB

table_data_tables.html 50KB

clients.html 49KB

table_foo_table.html 40KB

index_v1.html 38KB

form_basic.html 35KB

buttons.html 34KB

table_bootstrap.html 30KB

index_v3.html 30KB

social_feed.html 27KB

widgets.html 27KB

index_v5.html 25KB

typography.html 25KB

projects.html 24KB

index_v4.html 24KB

grid_options.html 23KB

teams_board.html 22KB

tabs_panels.html 22KB

project_detail.html 22KB

file_manager.html 21KB

forum_main.html 19KB

suggest.html 19KB

table_basic.html 19KB

index_v2.html 19KB

mailbox.html 19KB

blog.html 18KB

contacts.html 18KB

graph_metrics.html 17KB

toastr_notifications.html 17KB

modal_window.html 17KB

tree_view.html 17KB

faq.html 16KB

graph_echarts.html 16KB

article.html 15KB

css_animation.html 14KB

layerdate.html 12KB

agile_board.html 12KB

form_validate.html 12KB

共 323 条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H+ 后台主题UI框架 - 字体图标</title> <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台"> <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术"> <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet"> <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> <link href="css/animate.min.css" rel="stylesheet"> <link href="css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank"> </head> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col-sm-3"> <div class="ibox float-e-margins"> <h2>Font Awesome 4.4.0</h2> 字体图标的最佳集合。提供可伸缩矢量图标，可以立即进行定制大小、颜色、阴影，所有都可以用CSS样式来完成。 </div> </div> <div class="col-sm-9"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>所有图标 <small class="m-l-sm">所有图标集合 - <a target="_blank" href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesome</a> </small></h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="icons.html#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="icons.html#">选项1</a> </li> <li><a href="icons.html#">选项2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content icons-box"> <section id="new"> <h2 class="page-header">4.4版新增的66个图标</h2> <div class="row fontawesome-icon-list"> <div class="fa-hover col-md-3 col-sm-4"><a href="#500px"><i class="fa fa-500px"></i> 500px</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#amazon"><i class="fa fa-amazon"></i> amazon</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#balance-scale"><i class="fa fa-balance-scale"></i> balance-scale</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-empty"><i class="fa fa-battery-0"></i> battery-0 <span class="text-muted">(alias)</span></a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-quarter"><i class="fa fa-battery-1"></i> battery-1 <span class="text-muted">(alias)</span></a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-half"><i class="fa fa-battery-2"></i> battery-2 <span class="text-muted">(alias)</span></a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-three-quarters"><i class="fa fa-battery-3"></i> battery-3 <span class="text-muted">(alias)</span></a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-full"><i class="fa fa-battery-4"></i> battery-4 <span class="text-muted">(alias)</span></a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-empty"><i class="fa fa-battery-empty"></i> battery-empty</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-full"><i class="fa fa-battery-full"></i> battery-full</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-half"><i class="fa fa-battery-half"></i> battery-half</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-quarter"><i class="fa fa-battery-quarter"></i> battery-quarter</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#battery-three-quarters"><i class="fa fa-battery-three-quarters"></i> battery-three-quarters</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#black-tie"><i class="fa fa-black-tie"></i> black-tie</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar-check-o"><i class="fa fa-calendar-check-o"></i> calendar-check-o</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar-minus-o"><i class="fa fa-calendar-minus-o"></i> calendar-minus-o</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar-plus-o"><i class="fa fa-calendar-plus-o"></i> calendar-plus-o</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#calendar-times-o"><i class="fa fa-calendar-times-o"></i> calendar-times-o</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#cc-diners-club"><i class="fa fa-cc-diners-club"></i> cc-diners-club</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#cc-jcb"><i class="fa fa-cc-jcb"></i> cc-jcb</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#chrome"><i class="fa fa-chrome"></i> chrome</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#clone"><i class="fa fa-clone"></i> clone</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#commenting"><i class="fa fa-commenting"></i> commenting</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#commenting-o"><i class="fa fa-commenting-o"></i> commenting-o</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#contao"><i class="fa fa-contao"></i> contao</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#creative-commons"><i class="fa fa-creative-commons"></i> creative-commons</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#expeditedssl"><i class="fa fa-expeditedssl"></i> expeditedssl</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#firefox"><i class="fa fa-firefox"></i> firefox</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#fonticons"><i class="fa fa-fonticons"></i> fonticons</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#genderless"><i class="fa fa-genderless"></i> genderless</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#get-pocket"><i class="fa fa-get-pocket"></i> get-pocket</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#gg"><i class="fa fa-gg"></i> gg</a></div> <div class="fa-hover col-md-3 col-sm-4"><a href="#gg-circle"><i class="fa fa-gg-circle"></i> gg-circle</a></div>

评论收藏

内容反馈