Bootstrap组件之响应式导航条

响应式导航条：在PC和平板中默认要显示所有的内容；但在手机中导航条中默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”，只有单击折叠按钮后才显示所有的菜单项。

  基础class： .navbar   

 1、Bootstrap中导航条的按位置：

1)顶部导航条

2)底部导航条

   Bootstrap中导航条的按颜色：

1)浅色底深色的字 .navbar-default

2)深色底浅色的字 .navbar-inverse

   Bootstrap中导航条的按定位：

1)相对定位position: relative 默认值

2)固定定位position: fixed      .navbar-fixed-top/bottom

 2、导航条的结构：

   div    

div 

!--导航条的头部：商标+按钮--

div 

a 

button 

/div

!--导航条折叠菜单：菜单、按钮、搜索框、链接、文本...--

div 

ul 

form 

button 

span 

a 

/div

/div

  /div

水灵儿 www.zyl.me 爱折腾，喜欢造，花起钱来毫不心疼，事后沉默一周... 极简主义者，主从事Web开发兼前端爱好者。 全栈开发尝试者、自媒体、极简主义者、爱心极客