发表于: 2016-03-23 02:30:27

1 954


今天完成的事情:第一个页面还差一个footer完成。拆解了bootstrap的轮播和导航栏。

1、导航栏需要写两个样式,一个用navbar-header类名命名容器,里面放一个用data-target="id"与正常导航相关联的button来写出手机屏时按钮下拉菜单样式,button的类名需要使用navbar-toggle和collapsed,后接一个data-toggle="collapse"。非手机端下的导航则使用类名collapse和navbar-collapse,然后赋予一个id给一个容器,里面放入一个无序列表用类名nav、navbar-nav(还可以加入navbar-左右来控制选项靠哪边。)

2、bootstrap的轮播就容易多了,用一个.carousel和.slide作为类名的父容器装入三个部分并赋予一个类名以及data-ride="carousel":有序列表指示器.carousel-indicators,图片容器.carousel-inner,还有翻页控制器.carousel-control。给indicators第一个li赋.active表启动,同样inner里面用来装图片的第一个小盒子也要赋.active,盒子用.item,最后翻页箭头在类名中加入left或right原理同navbar-right表位置,分别赋data-slide="prev或next"表向前翻或向后翻,记得要通过id指向父级容器!

明天计划的事情:补完task10,开始task11

遇到的问题:对bootstrap的布局还是有一点小硌应。。时常会有元素放不下跑到下一行去的情况。。还是对bootstrap自带的padding、margin效果不熟。。

收获:导航栏弄懂了,相当实在。


返回列表 返回列表
评论

    分享到