发表于: 2017-04-12 20:48:33
2 666
今天完成的事情:
任务14 navbar/grid组件
任务15
任务14 carousel组件
【navbar】
navbar-fixed-top 固定顶部
navbar-right 导航条左侧
navbar-header 移动端默认显示内容
navbarbtn 移动端导航展开
navbar-brand 导航栏logo
navbar-list 导航选项主体内容
PC端
默认导航选项主体内容右浮动
移动端默认显示内容部分隐藏
移动端
默认显示内容flex布局
改变navbartab display
【carousel】
carouselbox轮播窗口
carousel-inner 轮播内容组
list-item 轮播单页
carousel-caption 轮播单页标题
carousel-indicators 底部控制原点
carousel-control 左右控制箭头
carouselbox w=100%, list w=100*(N+2)% item w=100/(N+2)%
控制原点/箭头、单页标题均为相对定位
【grid】
row 行
col-xs/sm/md 栏
row的负margin与container padding值相等,消除左右边际重复padding
col-xs/sm/md 从小往大写,保证某一元素只写了col-xs无sm/md情况下,屏幕宽到sm/md范围时仍能保证xs情况下比例。
components.less
@import "navbar/grid/carousel".less
@import "components/mixins.less";
写入reset&其他常用样式
页面
link components.css
link 本站common.css
link thispage.css
明天计划的事情:
开始js
遇到的问题:
无
收获:
熟悉grid/navbar/carousel写法
熟悉less
评论