bootstrap是如何实现博客导航栏的?

bootstrap是一个前端框架,能快速搭建一个可用的、商业化的、简单高效的网站。基于bootstrap里的规则(栅格系统、css样式、组件、基于jQuery实现的动态效果),让我们一起开始实现一个小目标:博客的导航栏。

实现效果如下:

屏幕缩小:

部分代码如下:

值得注意的是:

1 实现了顶部fix定位的效果。与之对应的是和。意思你懂的。以此类推而已。

2 由于是响应式,针对超小型、小型、中型和大型屏幕,有不同的样式。导航栏可以实现面包屑的效果。即:当我们把网页宽度缩小之后,导航栏也会跟着缩小,知道最小化后弹出面包屑icon。点击icon,就竖向弹出导航元素。(在手机端体验比较明显)。

而实现方式是从上到下分别应用的类名为:

其中下拉菜单,切记用组合的思想。也就是使用dropdown及后缀类名来实现。

*文中部分代码引入官网例子

阿莱西 工业设计作品欣赏

简介:阿莱西公司成长于米兰,它无疑是20世纪后半叶最具影响力的产品设计公司之一。阿莱西公司革新了我们看待家庭用品的方式,把生产基本实用主义产品转化为去给家庭创造革新的、多彩的、巧妙的、实用的产品

my feeling:三角形给人以稳定性,金属银色的贵重严肃感和手柄上的防烫塑料相结合,达到了刚柔结合的美感。同时,基于壶嘴的设计不失浪漫、可趣和实用性。如果能拥有它,生活定会充满趣味吧。

作者:yixiang/北京

介绍:每日一小步,愿与你同行~

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180125G00PS300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券