JavaEE知识篇(8-25)——bootStrap
提取码:cayl
发布日期:2021-10-02 10:56:56
浏览次数:19
分类:技术文章
本文共 4796 字,大约阅读时间需要 15 分钟。
本文旨在记录学习bootStrap响应式效果,具体开发时需要更具bootStrap开发手册。
文章目录
1.BootStrap简介(WEB前端CSS框架)
- Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 中文官网:
- 响应式布局简介 响应式布局:一个网站能够兼容多个终端(手机,iPad等),而不需要位每一个终端做一个特定的版本。
2. 环境的搭建:
- bootStrap下载:
- 目录结构:
- 内容结构: 在dist文件中
bootstrap/├── css/│ ├── bootstrap.css //预定义的css文件│ ├── bootstrap.css.map //css与less源码对应的文件│ ├── bootstrap.min.css //压缩文件│ ├── bootstrap.min.css.map│ ├── bootstrap-theme.css //主题文件│ ├── bootstrap-theme.css.map│ ├── bootstrap-theme.min.css│ └── bootstrap-theme.min.css.map├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/ //字体(字体图标) ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
- 简洁模板:
Bootstrap 101 Template 你好,世界!
3. 实现商城首页的预备知识:
- 布局容器: 帮助手册:
- 栅格: 帮助手册:
- 按钮: 帮助手册: 代码实现:
- 响应式工具: 帮助手册:
4. 实现商城首页代码:
商城首页
提取码:cayl
转载地址:https://blog.csdn.net/jiangyi_1612101_03/article/details/89041665 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月25日 14时30分14秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
mysql表名长度_JavaWeb之MySQL(一)
2019-04-21
mysql服务器语法_Mysql语法
2019-04-21
python双击py一闪_Python脚本在双击.py时无法正常运行
2019-04-21
redis logfile为空_关于Redis(二)
2019-04-21
git更换_git命令
2019-04-21
hp-ux 查看系统负载_Linux性能调优 | 平均负载的理解和分析
2019-04-21
elementui的tree组件页面显示不出数据_vue路由及组件
2019-04-21
python 动态tabel的数据爬取_使用requests爬取python岗位招聘数据
2019-04-21
input js number 整数_JS基础简单小结(1)
2019-04-21
二阶差分预测后数据还原公式_xgboost系列丨xgboost原理及公式推导
2019-04-21
mysql 阿里云 添加磁盘空间_rds mysql磁盘空间包含
2019-04-21
java中gui_java中GUI是什么意思?详细图解
2019-04-21