1、介绍
-
BootStrap (最好看的)
- css
- js
- [x] 学习 BootStrap 规则
-
jQueryUI (美观一般,偏后台。*)
- css
- js
- [x] 学习 jQueryUI 规则
-
EasyUI (html框架和生成的效果不一样,有时需要修改css、js,代价大一点)
- css
- js
- [x] 学习jQueryUI 规则
**总结:**jQueryUI和EasyUI 用在后台管理偏多,Bootstrap 后台主页显示都可以用。
可以直接用模板,不用重复造轮子。
2、BootStrap
- 响应式布局(响应式页面)
面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题。比如网页随着窗口大小的变化而显示不同的样式。
BootStrap css里面存在大量的响应式布局。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < head > < style > .c1{ background-color: red; height: 50px; } @media (min-width: 900px){ .c2{ background-color: grey; } } </ style > </ head > < body > < div class="c1 c2"></ div > </ body > |
- 图标、字体 @font-face
BootStrap 里面有图标,但是没有图片,里面的图标是基于字体做的。
在 dist/fonts/ 目录里面。每个图标都有绑定的位置。比如 ”content: “\2212”“
使用的时候直接写上图标样式就可以了。
- 基本使用
修改BootStrap里面的样式时,注意样式有优先级的,下面的生效。更方便的,设置为最优先,最重要的。
1 2 3 | .no-radius{ border-radius: 0 !important; /*优先级最高,最重要的*/ } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css"> < link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css"> < style > .no-radius{ border-radius: 0 !important; /*优先级最高,最重要的*/ } </ style > </ head > < body > < span class="glyphicon glyphicon-plus-sign"></ span > < script src="jquery-1.12.4.js"></ script > < script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></ script > </ body > </ html > |
3、插件实现轮播图(bxSlider)
bxslider.com 下载插件,网站上有使用教程。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css"> </ head > < body > < ul class="bxslider"> < li >< img src="images/1.jpg" /></ li > < li >< img src="images/2.jpg" /></ li > < li >< img src="images/3.jpg" /></ li > < li >< img src="images/4.jpg" /></ li > </ ul > < script src="jquery-1.12.4.js"></ script > < script src="jquery.bxslider/jquery.bxslider.js"></ script > < script > $(document).ready(function(){ $('.bxslider').bxSlider(); }); </ script > </ body > </ html > |
本站仅用于个人学习的笔记和记录,有时候是阅读别人的文章的时候做着笔记整理,有些是在实际工作中遇到的问题以及解决小问题的记录。
当前仅用于作为一个萌新程序媛的查漏补缺地检索地。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥