响应式导航栏js代码(响应式下拉导航)

　　Bootstrap是一种多功能的Web前端开源框架，以LESS项目为基础，由Twitter的内部工程师开发，它为Web应用程序UI提供了一致的框架，通过了解如何使用Bootstrap，开发人员将能够快速完成网站和Web应用程序（包括移动友好型应用程序）的开发，其具有以下几大特点：

　　（1）跨设备、跨浏览器

　　（2）内置很多Java 插件和图标

　　（3）代码简洁、视觉优美，支持HTML5、CSS3和LESS动态样式

　　（4）响应式布局，可以兼容PC端、PAD以及手机移动端的页面访问

　　Bootstrap的代码结构包含三大核心目录：css(样式)、js(脚本)和fonts(字体)，开发工具一般使用Sublime Text或者Notepad++，而测试工具则包括各类浏览器、Opera Mobile Emulator等。

　　Bootstrap作为一款优秀的Web页面框架，能够让开发人员不再需要花费太多精力在浏览器兼容问题上，同时，通过创建单一的框架来提供WEB页面设计中常见的元素，既能避免网页开发经常需要使用到各类不同组件的麻烦，还保持了合理的灵活性。

　　Bootstrap是目前GitHub软件库中最受欢迎的项目，同时也受到了个人、小型团队以及大型组织的关注。Bootstrap不仅包含了基本的CSS元素，还以LESS项目为基础，对CSS语言进行了增强，让排印、表单、按钮、表格、网格、导航、警告等网页功能的实现变得不再复杂。另一方面，Bootstrap的学习门槛也不高，只需要掌握了基础的HTML和CSS应用知识，就能开始好好体验一番Bootstrap的魔力了。

　　一、排版样式

　　Bootstrap提供了一些常规设计好的页面排版样式供开发者使用，包括了标题、页面主体、对齐、列表等常规内容，如在h1~h6元素之间嵌入small元素，通过Firebug查看，可以发现h1~h3下small元素的大小只占父元素的65%，而h4~h6下small元素的大小只占父元素的75%。

　　二、表格和按钮

　　Bootstrap提供了一些丰富的表格样式供开发者使用，用以实现各式各样的表格和按钮功能，通过内置的CSS定义，实现多种效果的显示。

　　三、表单和图片

　　除了基本的表单样式，Bootstrap还提供内联表单、表单合组、水平排列、复选框和单选框、下拉列表、校验状态、额外图标等多种选择，满足了不同开发者的需求。

　　四、栅格系统

　　Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，通过完成屏幕和设备等宽、是否运行用户缩放、缩放比例等设置，就能实现不同屏幕大小的自适应效果。在栅格系统中，是通过一系列的行(row)与列(column)的组合来创建页面布局的，浏览器会随着屏幕大小的增减自动分配最多12 列，其中，内层.container 容器的自适应宽度为：自动、750px（小屏幕平板）、970px（桌面显示器） 和1170px（大桌面显示器）。

　　四、导航组件

　　Bootstrap提供了一组导航组件，用于实现Web页面的栏目操作，其中，导航条是网站中作为导航页头的响应式基础组件，这些组件都依赖于同一个.nav类，状态类也是共用的，通过改变修饰类就能够改变样式。

　　对于很大一部分擅长于代码和数据的开发人员来讲，毫无疑问Bootstrap是一个极其宝贵的工具，有了Bootstrap，就能够在Web项目中把更多的关注点放到基本代码和数据中，而不是视觉和其他感官设计。Bootstrap的响应式布局让它可以兼容PC端和手机设备端的页面访问，其附带的库包含了大量的按钮样式、导航样式和其他可重用工具。总而言之，Bootstrap尤其适用于将思想的闪光点快速转变为 Web项目，本文对Bootsrap的特性和应用进行了简要的介绍，其精髓当然不仅仅局限于此，读者们如果有兴趣的话，相信能够探索到Bootsrap更多有趣的地方。