是否是bootstrap框架,下拉到最后一项,找到系统详情点击回车查看具体框架。
一个前端开发框架其实就是一系列产品化的html/css/javascript组件的集合,我们可以在设计中使用。前端开发框架很多,有些写的很好。为每个人为了方便起见,下面列出了目前功能最强大、应用最广泛的几个前端开发框架。请记住,这些框架不仅仅是css网格之类的东西,它们还包括一整套前端开发框架。
引导程序
boostrap绝对是目前最流行最广泛使用的框架。它是一个漂亮、直观、功能强大的网页设计工具包,可以用来开发跨浏览器兼容的漂亮页面。它提供了许多流行的简单ui组件、网格系统和一些常用的javascript插件。
bootstrap是用动态语言less编写的,主要包括四个部分:
脚手架-全球风格,响应12列网格布局系统。记住bootstrap默认不包含反应式布局的功能。所以,如果你的设计需要实现响应式布局,那么你就需要手动开启这个功能。
基本css-包括基本的html页面元素,如表格、表单、按钮和图像。基本css为这些元素提供了优雅和一致的风格。
组件——收集了大量可重用的组件,比如下拉列表、按钮组和导航控件——包括选项卡、药丸和列表、面包屑导航、页码、缩略图和进度条。
下拉菜单的使用和原理
一个
因为bootstrap.js是由jquery实现的,所以我们需要先加载jquery组件。在bootstrap中使用下拉菜单有非常严格的结构,使用不当就无法显示。使用class#34dropdown#34的容器包装整个下拉菜单:
ltdivclass#34dropdown#34gtlt/divgt
使用ltbuttongt按钮作为父菜单,并定义class#34dropdown-t。oggle#34,添加自定义属性data-toggle#34dropdown#34到ltbuttongt,这里相对固定。所谓相对固定是指按钮的样式可以修改:
ltbuttonclass#34btnbtn-defaultdropdown-toggle#34type#34button#34data-toggle#34dropdown#34gtlt/buttongt
在与ltbuttongt按钮相同的级别添加一个ltulgt元素,并添加class#34drop-menu#34。通过以上三种,可以实现简单的下拉菜单。完整的代码如下。
2
将上面的代码粘贴到页面中并运行它。单击下拉菜单按钮,将出现下拉菜单。再次点击按钮,下拉菜单将消失。初始状态下默认不显示下拉菜单,因为#34display:none#34在class#34drop-menu#34#34中设置了隐藏下拉菜单,我们可以使用chrome浏览器中的审查元素(或者firefox中的firebug)来查看其样式。当我们单击下拉菜单时,一个#34open#34类将被添加到class#下拉列表#34中,当我们再次单击它时,#34open#34将被删除。这就是下拉菜单的显示和隐藏。