发表于: 2017-03-30 19:39:59

1 1265


今天完成的事:导航栏的切换城市,首页banner图轮播,整体公共样式的调整。

明天计划的事:完成萝卜多首页(重点在最新职位的轮播和伙伴之言的轮播)。

困难:

1.老是踩些bootstrap的坑啊!导航栏上的logo在屏幕宽度变小(特别是小于768px时导航栏高度变小)的时候分辨率会明显下降,调整宽高度都不行,后来拉小师妹来探讨下,又搞了好久,发现在bootstrap里自带的导航栏设定的logo高度为20px,且自带了个padding:15px,在导航栏高度比较小的时候,图片的问题就压缩的很明显了,最后改成如下所示就可以了。

.navbar-brand {
   height: auto !important;
}

2.做banner图的轮播时,图片获取和渲染都没问题,也可以通过点击底下的li标签来切换图片,但是不能自动的轮播,找了好些轮播的代码放上去都不行,困了好久,不行了就拉冯妹妹来问,他说之前他也踩过,需要再重新定个定时器,就是原理不晓得,明天看下源码。

$('.carousel').carousel({
   // 轮播图自动轮播定时器
   interval: 2000
})

收获:

1.踩的坑越多学到的也就越多,感觉找坑越来越熟练了,用bootstrap一定要注意自带的一些样式会影响自己的设置。

2.今天做切换城市的模态框,学会了怎么使用,主要的就是bootstrap自带的modal设置:

<div class="modal fade"
    id="myModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myModalLabel">
   <!--地址选择模态框-->
   <div class="modal-dialog">
       <div class="modal-content">
 <span class="header-nav-modalText">点击进入</span>
 <button class="btn header-nav-modalBtn" ui-sref="home">
                北京站
 </button>
       </div>
   </div>

3.学会了直接从接口获取图片渲染出来。


返回列表 返回列表
评论

    分享到