发表于： 2019-08-01 19:51:36
1 776
今天完成的事情
任务八页面一部分界面
主要应用的弹性布局来完成
今天遇到的问题
1.在使用F12进行界面调试的时候，发现在伸缩界面的时候，界面布局较混乱，部分内容不能达到自适应，会被覆盖住不动
问题分析 ： 由于部分盒子模型给了固定宽度，所以无法达到自适应，此处的盒子不能给固定宽度
2.在查看师兄任务成果的时候，发现在调试界面，师兄的界面内容可以随着浏览器的不同而自适应布局，更为人性化，以下是示例
问题分析：经过师兄指导，才知道任务八需要使用bootstrap库来完成，使用其中的栅格布局系统，
今天的收获
bootstrap栅格布局
1.什么是bootstrap
1、Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
2、Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 [1] 它由Twitter的设计师MarkOtto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的BreakingNews都使用了该项目。 [2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
2.栅格布局
1、Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
2、网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
3.使用方法
1.在HTML5页面中引入包含有网格布局的bootstrap的css文件。
2.然后自定义几个类以便待会给div上色和定义高度。
3.然后给最外层添加container类且子div中添加row类，
container可以让div居中并且指定一些padding和margin，
row必须添加进去以便达到响应式效果。
4.然后在row里面的div添加col类。
5.col类可以让div成水平排列状态，
但是无论什么宽度的时候div都是水平状态的。
6.这时候可以通过添加col-sm-4来让div在屏幕比较小(类似手机宽度)时候会自动垂直排列，
注意col-sm后面的数字全部相加要为12。
7.这样当屏幕宽度比较大时div便是水平排列，
而较小时便会垂直排列了。
8.如图，再把数值进行相应变化但是不超过12。
9.然后在大屏幕宽度的时候就会分成12等份了，
这时候就可以看到分别为6份3份3份了。
10.当然还可以用md来设置当屏幕宽度类似平板时就进行垂直排列。
明天的计划
1.深入理解bootstrap栅格布局，学会使用方法，并将今天完成的页面用bootstrap栅格布局进行重构，达到任务要求
2.任务8页面1剩下的部分，明天争取完成，考虑是否继续按照bootstrap栅格系统完成
返回列表
评论