首页 > 教育培训

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

实习编辑 • 2023-11-19 14:37:04 • 教育培训 • 阅读 3

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

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

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

bootstrap自带以下特性：全局的css设置、定义基本的html元素样式、可扩展的class，以及一个先进的网格系统。

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

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

javascript插件：bootstrap包含了十几个自定义的jquery插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

定制：您可以定制bootstrap的组件、less变量和jquery插件来得到您自己的版本。

下拉试验原理？

下拉菜单的使用及原理

1

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

ltdivclass#34dropdown#34gtlt/divgt

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

ltbuttonclass#34btnbtn-defaultdropdown-toggle#34type#34button#34data-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被移除，下拉菜单的显示与隐藏就是这样实现的。

下拉菜单样式classbootstrap按钮

原文标题：bootstrap制作下拉搜索框 bootstrap在开发中遵循什么优先的原则？，如若转载，请注明出处：https://www.bjtdsx.com/tag/17178.html
免责声明：此资讯系转载自合作媒体或互联网其它网站，「天地水秀」登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，文章内容仅供参考。

bootstrap制作下拉搜索框 bootstrap在开发中遵循什么优先的原则？ bootstrap制作下拉搜索框 bootstrap在开发中遵循什么优先的原则？介绍
赞 ( )
打赏 微信扫一扫微信扫一扫
上一篇：tp 下一篇：红米手机pin码怎么设置 红米笔记本pin怎么设置？

相关推荐