2016 - 2024

感恩一路有你

bootstrap制作下拉搜索框 bootstrap在开发中遵循什么优先的原则?

浏览量:2633 时间:2023-06-18 19:38:21 作者:采采

bootstrap在开发中遵循什么优先的原则?

Bootstrap是前端开发框架,遵循移动优先的原则。

Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。

组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。

定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

下拉试验原理?

下拉菜单的使用及原理

1

因为Bootstrap.js是依赖jQuery来实现的,所以我们需要先加载jQuery组件。在Bootstrap中使用下拉菜单有一个非常严格的结构,如果使用不当则不能显示出下拉菜单。使用class#34dropdown#34的容器包裹整个下拉菜单:

ltdiv class#34dropdown#34gtlt/divgt

使用一个ltbuttongt按钮作为一个父级菜单,并且定义一个class#34dropdown-toggle#34,给ltbuttongt添加一个自定义属性data-toggle#34dropdown#34,这里是相对固定的。所谓的相对固定是指按钮的样式可以修改:

ltbutton class#34btn btn-default dropdown-toggle#34 type#34button#34 data-toggle #34dropdown#34gtlt/buttongt

在ltbuttongt按钮的同级添加一个ltulgt元素,并且添加class#34dropdown-menu#34。通过以上三种就可以实现一个简单的下拉菜单,完整代码如下

2

将上面的代码贴到页面中运行,单击下拉菜单按钮会出现下拉菜单,再次单击该按钮下拉菜单将消失。初始状态下,下拉菜单默认是不显示的,这是因为在class#34dropdown-menu#34中设置了#34display:none#34来隐藏下拉菜单,我们可以使用chrome浏览器中的审查元素(或者Firefox中的Firebug)来查看其样式。当我们单击下拉菜单的时候,class#34dropdown#34上会新增一个#34open#34类,再次单击时#34open#34被移除,下拉菜单的显示与隐藏就是这样实现的。

下拉菜单 样式 class Bootstrap 按钮

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。