发表于: 2018-11-10 22:50:44
1 859
今天完成的事情:今天任务8的第一个页面已经完成一半了,其中感觉比较困难的部分就是其中的导航栏以及图片的轮播图吧,不过索性都做完了,其它的内容部分还是不算太难,稍微只一下布局问题就行
明天计划的事情: 明天的话计划把任务8的第一个页面做完吧,bootstrap框架是越来越熟练,所以速度方面会有所提升
遇到的问题:
1,今天上午在做导航栏的时候,主题体部分已经完工,但是导航栏在进行缩小调试手机页面的时候,发现导航栏并不能自动下拉,我首先是拍下下代码,但是自己的代码是直接引用的官网上的样式来进行修改的,后来我又复制来一边发现还是同样的问题,然后进一步排查,发现自己在页头引用文件的时候,只引用了
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
css样式代码,没有引用js等文件所以下拉效果没用,后来我又加上了引用js文件的代码
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
发现导航栏能正常的进行下拉 了,如此才算解决问题,
2,在进行页头进行布局的时候,导航栏已经做好,但是最上面的客服热线以及几个图片在进行布局的时候却总是不能和下面导航栏中的文字相对应,当时自己尝试的解决办法还是通过设置内边距以及外边距的属性来解决问题,但是在进行缩放调试的时候还是不能够对齐,后来经过询问师兄了解到bootstrap对这方面有一个很好的设置,
栅格系统提供了集中内容居中、水平填充网页内容的方法,使用.container
(严格意义上也包括.container-fluid
,后文相同不再备注 - 译者) 应答网页宽度,或使用.container-fluid
使网页能够以100%
宽度呈现在所有的浏览器窗口或设备尺寸上。
换一个说法就是:.container
实现.container的宽度并居中呈现,.container-fluid
实现全宽度,并和其它网格实现对齐
在加上 .container 属性后解决来这个问题
收获:bootstrap对于各类属性的命名要多了解一下,因为在使用此框架的时候,基本上都是引用各种类名来解决问题,这方面还是以开发者文档为准,最起码要熟记常用的类名,以及其特有的布局结构是怎样布局的,可以大大节省时间
评论