发表于: 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


返回列表 返回列表
评论

    分享到