欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap登陆界面模板(响应式web开发项目教程)

程序员文章站 2023-11-27 09:49:04
背景虽然当前前端大行其道,各种框架层出不穷,随之而来的是学习成本的提升,有些时候甚至是为了学习而学习,可能自己并不会用得到,加重了自己的心理负担,特别是对后端程序员来说,并不是所有人都能够跟得上前端的...

背景

虽然当前前端大行其道,各种框架层出不穷,随之而来的是学习成本的提升,有些时候甚至是为了学习而学习,可能自己并不会用得到,加重了自己的心理负担,特别是对后端程序员来说,并不是所有人都能够跟得上前端的脚步,因此,今天分享一个免费的前端后台管理模板——gentelella admin,这在github上也斩获了17+star,可见还是有很多人需要的。


bootstrap登陆界面模板(响应式web开发项目教程)

介绍

gentelella admin是一个免费使用bootstrap管理模板。此模板使用默认的bootstrap 3样式以及各种强大的jquery插件和工具来创建用于创建管理面板或后端仪表板的强大框架。主题使用多个库来进行图表,日历,表单验证,向导样式界面,离开画布导航菜单,文本表单,日期范围,上传区域,表单自动完成,范围滑块,进度条,通知等等。

快速开发

  • 克隆仓库
git clone https://github.com/colorlibhq/gentelella.git

bootstrap登陆界面模板(响应式web开发项目教程)

  • 如果你没有安装gulp,则安装gulp
npm install -g gulp

  • 安装项目依赖
npm install

  • 输入gulp启动
gulp

  • 打开浏览器查看结果

bootstrap登陆界面模板(响应式web开发项目教程)

效果预览

在线演示地址:

https://colorlib.com/polygon/gentelella/index.html


  • 面板页面(首页)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

  • 表单

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

  • 一些高级组件

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

  • 表单验证

bootstrap登陆界面模板(响应式web开发项目教程)

  • 分步表单

bootstrap登陆界面模板(响应式web开发项目教程)

  • 上传表单

bootstrap登陆界面模板(响应式web开发项目教程)

  • 按钮

bootstrap登陆界面模板(响应式web开发项目教程)

  • 通用元素

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

  • 媒体元素

bootstrap登陆界面模板(响应式web开发项目教程)

  • 图标

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

  • 页面零部件

bootstrap登陆界面模板(响应式web开发项目教程)

  • 静态表格

bootstrap登陆界面模板(响应式web开发项目教程)

  • 数据表格

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

  • 图表类(比较多,不一一截图)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

bootstrap登陆界面模板(响应式web开发项目教程)

  • 403页面(404、500类似)

bootstrap登陆界面模板(响应式web开发项目教程)

  • 登录页

bootstrap登陆界面模板(响应式web开发项目教程)

  • 付款元素

bootstrap登陆界面模板(响应式web开发项目教程)

  • 多级菜单

bootstrap登陆界面模板(响应式web开发项目教程)

项目用到的插件


  • bootstrap
  • font awesome
  • jquery-autocomplete
  • fullcalendar
  • charts.js
  • bootstrap colorpicker
  • cropper
  • datatables
  • date range picker for bootstrap
  • dropzone
  • easypiechart
  • echarts
  • bootstrap-wysiwyg
  • flot – javascript plotting library for jquery.
  • gauge.js
  • icheck
  • jquery.inputmask plugin
  • ion.rangeslider
  • jquery
  • jvectormap
  • moment.js
  • morris.js – pretty time-series line graphs
  • pnotify – awesome javascript notifications
  • nprogress
  • pace
  • parsley
  • bootstrap-progressbar
  • select2
  • sidebar transitions – simple off-canvas navigations
  • skycons – canvas based wather icons
  • jquery sparklines plugin
  • switchery – turns html checkbox inputs into beautiful ios style switches
  • jquery tags input plugin
  • autosize – resizes text area to fit text
  • validator – html from validator using jquery
  • jquery smart wizard