bootstrap是一个前端框架,能快速搭建一个可用的、商业化的、简单高效的网站。基于bootstrap里的规则(栅格系统、css样式、组件、基于jQuery实现的动态效果),让我们一起开始实现一个小目标:博客的导航栏。
实现效果如下:
屏幕缩小:
部分代码如下:
值得注意的是:
1 实现了顶部fix定位的效果。与之对应的是和。意思你懂的。以此类推而已。
2 由于是响应式,针对超小型、小型、中型和大型屏幕,有不同的样式。导航栏可以实现面包屑的效果。即:当我们把网页宽度缩小之后,导航栏也会跟着缩小,知道最小化后弹出面包屑icon。点击icon,就竖向弹出导航元素。(在手机端体验比较明显)。
而实现方式是从上到下分别应用的类名为:
其中下拉菜单,切记用组合的思想。也就是使用dropdown及后缀类名来实现。
*文中部分代码引入官网例子
阿莱西 工业设计作品欣赏
简介:阿莱西公司成长于米兰,它无疑是20世纪后半叶最具影响力的产品设计公司之一。阿莱西公司革新了我们看待家庭用品的方式,把生产基本实用主义产品转化为去给家庭创造革新的、多彩的、巧妙的、实用的产品
my feeling:三角形给人以稳定性,金属银色的贵重严肃感和手柄上的防烫塑料相结合,达到了刚柔结合的美感。同时,基于壶嘴的设计不失浪漫、可趣和实用性。如果能拥有它,生活定会充满趣味吧。
作者:yixiang/北京
介绍:每日一小步,愿与你同行~
领取专属 10元无门槛券
私享最新 技术干货