这次主要讲解下如何利用bootstrap框架搭建顶部通栏部分。
顶部通栏需要实现的效果：在大屏幕下全部显示；当屏幕小到一定程度时全部隐藏。效果图如下
首先简单介绍下顶部通栏的组成部分。分为四块，主要用到字体图标、a链接等。其中的“免费注册”也是用a标签实现的，只是用了bootstrap提供的样式。
这一部分核心的是使用了bootstrap中布局中最基础最常用的栅格系统。
bootstrap中默认的列数是12列，通过 .row表示行 和 .col-xs-numer 这种表示宽度的列进行快速创建栅格布局。我们所要做的就是根据自己实际需求选择相应的列数即可。相应的代码只需要从https://v3.bootcss.com/css/处复制下来即可。
至于该部分在不同屏幕下显示、隐藏的功能，bootstrap也已经帮我们实现了，我们只需要在该块添加“hidden-sm hidden-xs”两个类即可。（sm代表屏幕尺寸≥768px同时<992px，xs代表屏幕尺寸<768px）
由此可以看出来，运用bootsrap框架能极大节省开发的时间，而且让我们的代码更加的简洁。