使用bootstrap建立响应式网页——头部导航栏

1、要建立响应式网站的布局，这个时候bootstrap的高级就能体现出来了。

2、先来了解一下bootstrap提供了哪些响应式工具供我们使用：

　　（1）屏幕宽度尺寸的概念：

　　　　　<768px xs 超小屏幕（手机）

　　　　　 768px>= <992px sm 小屏幕（平板）

　　　　　992px>= <1200px md 中等屏幕（桌面）

　　　　　>=1200px lg 大屏幕（桌面）

　　（2）通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容



　　　　隐藏的时候和面没有带*号，显示的时候带一个*号。这是因为，显示分为block、inline-block和inline三种情况。隐藏就是none，所以不带*号。

3、头部通栏——topbar

　　（1）字体图标

　　　　声明：　　@font-face{

　　　　　　　　　　　　font-family:"这个名字是你这些字体图标的代号";

　　　　　　　　　　　　src: url(../font/MiFie-Web-Font.eot) format('embedded-opentype'), url(../font/MiFie-Web-Font.svg) format('svg'), url(../font/MiFie-Web-Font.ttf) format('truetype'), url(../font/MiFie-Web-Font.woff) format('woff');

　　　　　　　　　　　　//src:url() format(); 如上所示

　　　　　　　　　}

　　　　使用： [class^="icon-"],[class*=" icon-"] {//字体图标类名一般用 icon- 开头

　　　　　　　　　　　　font-family: "与声明的名字保持一致才可以使用";
　　　　　　　　　}

　　　　特定的类就要用特定的字符： .icon-mobile::before {

　　　　　　　　　　　　　　　　　　　　content: "\e908";//字体图标的编码
　　　　　　　　　　　　　　　　　　　　font-size: 13px;//设置字体图标的大小
　　　　　　　　　　　　　　　　　　}

　　（2）栅格系统

　　　　这个是bootstrap提前给你写好的分列系统。咱们只需要拿过来用就好了。