JavaEE知识篇(8-25)——bootStrap
发布日期:2021-10-02 10:56:56 浏览次数:19 分类:技术文章

本文共 4796 字,大约阅读时间需要 15 分钟。

本文旨在记录学习bootStrap响应式效果,具体开发时需要更具bootStrap开发手册。

文章目录


1.BootStrap简介(WEB前端CSS框架)

  1. Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷
    中文官网:
  2. 响应式布局简介
    响应式布局:一个网站能够兼容多个终端(手机,iPad等),而不需要位每一个终端做一个特定的版本。

2. 环境的搭建:

  1. bootStrap下载:
    在这里插入图片描述
  2. 目录结构:
    在这里插入图片描述
  3. 内容结构:
    在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
  1. 简洁模板:
      
Bootstrap 101 Template

你好,世界!


3. 实现商城首页的预备知识:

  1. 布局容器:
    帮助手册:
  2. 栅格:
    帮助手册:
  3. 按钮:
    帮助手册:
    在这里插入图片描述
    代码实现:
  1. 响应式工具:
    帮助手册:
    在这里插入图片描述

4. 实现商城首页代码:

			
商城首页
热门商品   

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

最新商品   

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399

电炖锅

¥399


提取码:cayl

转载地址:https://blog.csdn.net/jiangyi_1612101_03/article/details/89041665 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:日常系列——excel批量导入文件夹中所有的文件的名称
下一篇:JavaEE知识篇(8-25)——JQuery编写省市联动,左右选择,表单校验

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月25日 14时30分14秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

mysql表名长度_JavaWeb之MySQL(一) 2019-04-21
mysql服务器语法_Mysql语法 2019-04-21
pdf 模版 汉字和数字_《吉林大学珠海学院毕业论文(设计)模板》(汉字标题版) .pdf... 2019-04-21
python bottle部署_nginx+uwsgi+bottle python服务器部署 2019-04-21
python双击py一闪_Python脚本在双击.py时无法正常运行 2019-04-21
redis logfile为空_关于Redis(二) 2019-04-21
mysql 设计两个主键都不可重复_程序员面试备战篇:18个经典MySQL面试专题解析(干货分享答案)... 2019-04-21
下列关于python2.x和3.x的区别说法正确_Python 2.x和Python 3.x版本有哪些区别?【面试题详解】... 2019-04-21
git更换_git命令 2019-04-21
hp-ux 查看系统负载_Linux性能调优 | 平均负载的理解和分析 2019-04-21
elementui的tree组件页面显示不出数据_vue路由及组件 2019-04-21
android hook sensor数据_最近,又有人在谈论Android的前景了!深入解析趋势及必备技术点... 2019-04-21
python 动态tabel的数据爬取_使用requests爬取python岗位招聘数据 2019-04-21
input js number 整数_JS基础简单小结(1) 2019-04-21
二阶差分预测后数据还原公式_xgboost系列丨xgboost原理及公式推导 2019-04-21
docker mysql服务启动失败_docker中mysql初始化及启动失败问题解决方案 2019-04-21
mysql 阿里云 添加磁盘空间_rds mysql磁盘空间包含 2019-04-21
mysql 1364 hy000_mysql SQL Error: 1364, SQLState: HY000 保存错误 2019-04-21
mysqli拓展还能用mysql_最近在学习php,其中使用了MYSQLi扩展,注意是MYSQLi不是MYSQL(因PHP7已经不支持MYSQL扩展了)。... 2019-04-21
java中gui_java中GUI是什么意思?详细图解 2019-04-21