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

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

实现效果如下:

屏幕缩小:

部分代码如下:

值得注意的是:

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

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

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

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

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

阿莱西 工业设计作品欣赏

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

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

作者：yixiang/北京

介绍：每日一小步，愿与你同行~