179      阿里云  技术社区[云栖]

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>

最后更新：2017-11-05 11:03:59

  上一篇：  Boostrap全局CSS样式

  下一篇：  前端总结（待续）