1 响应式导航栏，就是右上角的三道杠，点一下下方出现隐藏的导航栏如果屏幕够大就显示所有的导航选项，如果屏幕小比如手机，就显示部分，剩下的放到三道杠里隐藏2 外面套一个大的div，其实建议用nav标签，语义化。

禁止响应式布局有以下步骤1去掉这个CSS文档中提到的设置浏览器视口的标签2属性设置宽度值来重写框架的默认宽度设置容器类，比如宽度970px重要确保所有这些设置都放在默认的引导CSS文件后面注意，如果放在媒体。

响应式导航就是可以在不同的设备下查看不同的效果 原先的做法是用两套不同的样式来回替换， 现在有了bootstrap之后， 就可以很简单的做到这样的效果 主要效果图 分别是电脑， 手机 如何实现bootstrap的响应式导航条呢。

第一步，打开手机“设置”选项第二步，在设置列表页面中，打开“系统”选项第三步，在系统设置页面中，打开“系统导航”选项第四步，在系统导航设置页面中，打开“导航栏”选项第五步，在导航栏设置页面中，选择合。

这种效果对用户来说是十分具有视觉冲击力的4CSS3+Js实现响应式导航条 今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query具体。

3 界面设计根据网站结构规划，进行各个页面的界面设计在设计过程中，要注重用户友好性视觉吸引力和响应式设计4页面制作根据界面设计的相关要求，进行页面的编码和制作这一步骤需要熟练掌握HTMLCSSJavaScript等。

所以我们不能本末倒置，将顶部栏做的过于花哨，进而分散用户的注意力此外极简风格很适合响应式设计，可以在多设备上追求一致的用户体验简约设计的另一大优点就是，设计师会经常遇到临时的迭代需求，领导突然让你在这里讲一。

分享几个常见的导航设计1滑出导航 滑出式导航是现在很流行的一种，当用户打开页面时，第一眼看到的是主要的内容而非菜单，给用户更好的第一印象响应式全屏滑出导航也可以给人愉悦的体验2全屏导航 全屏导航设计。