JQ-bootstrap我的开源前端框架

简介: 因为实在不知道写啥,所以迟迟没有相关的介绍。但是必须要积累过程资产,所以还是介绍一下,不定哪天就有人用了。       首先还是介绍遇到的问题,我是做传统后台管理系统的,公司赶时髦,要用bootstrap。
    因为实在不知道写啥,所以迟迟没有相关的介绍。但是必须要积累过程资产,所以还是介绍一下,不定哪天就有人用了。
 
    首先还是介绍遇到的问题,我是做传统后台管理系统的,公司赶时髦,要用bootstrap。公司其他团队已经用bootstrap作为前端做出一套系统了,算是当前系统的升级,我没参与,进入测试阶段后,我偷偷看了一眼——嗯,可能是我眼光高,可能是测试版,我可以忍住不吐槽,我又不上项目。抱着这样的心理,我被通知开发其中的一个模块,这时我又看到了jsp代码——嗯,可能是我开发经验少,可能是……。反正要让我开发我忍不了,一个表单,输入框能不一样长,一个保存按钮就挨在输入框旁边,换个行也行啊,这是我认识的bootstrap么,表格头和分页条挨着是什么鬼,没数据?有了数据要滚动整个屏幕是哪样,我在滚动到顶上看表头么;HTML你倒是缩进啊,倒是写注释啊,还有内部样式啊,以后不改了么,我新建个页面,要把写好的整个页面都粘贴过去,然后在一层一层的找就为修改个标题,然后拉到最下面修改数据源,还得靠搜索找到事件到底在哪。我百度了一下,发现bootstrap没有面向后台开发人员的框架,最多是组件控件,html和css还是要写一堆。
 
    1.由于后台管理程序界面大同小异,页面的大多数功能就是对数据的增删改查,复杂的逻辑由后台程序执行;所以当使用Bootstrap时有很多HTML是需要反复重复的粘贴复制,使用模板页又不能保证灵活性如果做了很多页面后需要统一修改,就会相当麻烦,对于专注后台代码人员是一个很大的工作量;
    2.后台代码人员对前端不是很熟悉,而且不会花大量时间优化前端代码,导致不同程序员开发的页面样式不统一,整个软件看着就不是一个风格;
    3.原生Bootstrap部分控件并不能满足客户需求,需要引用其他第三方插件,当多个第三方插件组合在一起的时候程序员的噩梦又开始了;
 
    所以如果公司没有专门的前端人员,也没有成熟的Bootstrap模板框架,将会遇到三个问题:重复的工作量,影响开发周期;页面风格不统一;前台代码逻辑复杂很难维护;
 
    当我发现这三个问题后着手用jquery封装原生Bootstrap和第三方插件,使页面引用统一的js和css,在尽量保证开发灵活的同时统一页面布局和样式。
 
    再来分享下具体的实现思路,
 
    1.首先作为控件要有一个统一的类,我命名为bsEx,随便起的,类包括 控件,基础属性和方法,事件也要走统一接口,要支持多语言,如果是第三方组件,要支持其所有属性和方法,这个类包含在一个js包里,组件要尽量减少前台html,保证一个控件一行或直接没有;
    2.要有一个css文件,调整组件样式;要为每个组件写出示例及API方便学习参考;
    3.要开源,以为只有我用到项目中了(jq22那上也有人用了但是没有跟踪不知道使用情况),源码要注释的明确方便修改;
    4.要有更新日志;
 
    实现的话就很简单了,只不过把属性提出来,输出html罢了。
 
    这是我的第一个开源项目,大家多多支持,有不好的地方一定要通知我,我会不要脸的接受的。

    项目源码

    https://gitee.com/shixixiyue/MyBootstrapEx

    可以通过右上角 [查看本页面源码] 进行在线查看,方便学习

    v2.0版本 https://shixixiyue.gitee.io/mybootstrapex/

目录
相关文章
|
3月前
|
JSON 前端开发 JavaScript
惊艳!阿里开源 15.2k Star 企业级低代码引擎揭秘,如何变革前端开发方式?
阿里巴巴开源的 LowCodeEngine 是一款企业级低代码引擎,具备可视化编排、UI 渲染、代码生成等全链路能力。支持 React、Vue、Rax 等框架,提供高扩展性与类型安全,助力高效开发,降低维护成本,适用于后台系统、多端同步等场景。
611 1
|
2月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
473 0
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
536 3
|
6月前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
1223 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
3月前
|
Web App开发 前端开发 关系型数据库
GitHub 2.8k star 开源既封神,“Liquid‑Glass‑React”,让你前端界面瞬间拥有苹果级液态玻璃效果!
Liquid-Glass-React 是一款开源前端组件,旨在将 Apple iOS 26 的“液态玻璃”视觉效果引入 React 应用。凭借逼真折射、多种反射模式、响应式交互及高度可配置性,它已获得 2.8k stars,成为提升 UI 质感的热门工具。
305 0
|
4月前
|
人工智能 前端开发 数据可视化
天都塌了,17K+ Star 的AI开源神器!Onlook 如何颠覆前端开发与设计协作?怎么办
Onlook是一款开源的视觉优先代码编辑器,结合Figma直观操作与VS Code强大功能,支持浏览器中实时构建、编辑和部署React应用。项目已获17K+Star,提供快速创建Next.js应用、所见即所得的可视化编辑、AI驱动开发工具及一键部署协作等功能,是前端开发与设计协作的理想选择。
699 0
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
541 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
8月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
366 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
204 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
10月前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
312 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八

热门文章

最新文章

  • 1
    前端起dev从110秒减少到7秒, 开发体验大幅提升
    68
  • 2
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    331
  • 3
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    367
  • 4
    VSCode AI提效工具,通义灵码前端开发体验
    558
  • 5
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    347
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    355
  • 7
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    204
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    410
  • 9
    详解智能编码在前端研发的创新应用
    440
  • 10
    智能编码在前端研发的创新应用
    319