发表于: 2016-03-29 00:46:43
1 1660
今天完成的事:task10-1的页面
明天要做的事:task10-2 争取把task11敲完
遇到的问题:
1首页头部在小屏幕的时候会拥挤
问过超帅的启宸师兄后知道在小屏幕上要学会取舍,因为尺寸位置不够不可能像电脑上全部显示,参考张孝坤师兄的办法,加入visible属性就看上去好一些
2<nav>导航栏的使用,尤其是下拉按钮的使用会出现点不开的问题
后来发现自己蒙圈了没有在最底部引入bootstap的js文件
<script src="bootstrap-3.3.5/js/tests/vendor/jquery.min.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
3 删格系统的响应式重置问题(就是删格里面列的高度不一样导致的串行问题)
第一行的左边高度高于右边 导致第二行无法对齐正常显示
去官网看的解释是:
响应式列重置
即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix
和 响应式工具类。
<div class="clearfix visible-xs-block"></div>
但是我不知道怎么使用这行代码(每一个地方都尝试过,没效果啊),最后我是把第一行右边的块通过padding拉高让高度和左边一样 才解决的问题
4底部突然多出了空隙
最后问了萌萌哒的基柯师兄知道这是bootstrap的默认属性 最后通过 p{margin:0;}解决了问题
未解决的问题
1 垂直居中的问题
查了一下肯能和 display:table-cell 有关
但是没找到什么好的方法去让 圆圈--文字---箭头 保持垂直居中
还有就是文字 有 两行的 和一行的 然后箭头就只能和左边的文字垂直居中
2bootstrap删格---行的问题
第5和第6块直接移到了右侧(并不知道怎么办) 我最后是把上下分成了两行顺序就对了
收货:
今天对bootstrap的使用认识深刻了一些,bootstrap对响应式十分的友好 ,使排版更加地清晰,组件使用比较方便。但是我自己问题还是好多啊。
我的代码地址:http://119.10.57.69/ptt008/task10/task10.html
今天看到的讲解bootstrap的网站:http://www.runoob.com/bootstrap
评论