我们可以使用jquery来定位一个有(data-toggle=“折叠”)属性但没有类的元素吗？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

python测试开发django-188.Bootstrap折叠（Collapse）插件

可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠（Collapse）以使用带有属性的链接href或带有属性的按钮data-target。...单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容 .collapsing在过渡期间应用 .collapse.in显示内容多个折叠只需向元素添加data-toggle=”collapse”和 adata-target即可自动分配对可折叠元素的控制。...该data-target属性接受一个 CSS 选择器来应用折叠。确保将类添加collapse到可折叠元素。如果您希望它默认打开，请添加附加类in。折叠元素实际被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.collapse Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。

4K5 0

Jump Start Bootstrap 第4章

这个ul元素应该有类”dropdown-menu”。现在，我们有了一个简单的下拉菜单，在单击链接时显示菜单。我们可以在浏览器中查看它，如图所示。 ?...Bootstrap按钮有两个状态；active和inactive,active状态有一个类”active”,但inactive状态没有关联类；相反的，你可以用下面的代码创建一个简单的按钮并切换状态。...对于本体，我们需要一个包含类modal-body的元素。您可以将几乎任何内容放到该元素中。你甚至可以使用Bootstrap的网格系统来组织内容。...它应该有一个data-target属性来告诉Bootstrap，在一个网页中可以有多个模式对话框。我们还需要定义的data-toggle属性来确定单击时触发的内容。...元素，可以作为一个modal handle元素，可以包含一个包含链接的属性href。Bootstrap模式对话框有一个选项，当单击该句柄时，将该链接加载到它的modal-body元素中。

35K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

BootStrap应用开发学习入门1

列表组（list-group）描述:列表组件用于以列表形式呈现复杂的和自定义的内容,我们还可以向任意的列表项添加徽章组件，它会自动定位到右边; Class类说明: .list-group...分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。...分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。...赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。...常常和面板类class .panel 进行连用基础属性: .panel-collapse #面板折叠类 .collapse #需要折叠的元素 .in #默认显示折叠元素

49.7K2 1

BootStrap应用开发学习入门1

48.7K3 0

Bootstrap学习文档（四）

Bootstrap 官网，另外需要给滚动监听加上样式，不然还是没有效果的，使用起来不太简单。... data 属性你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行...但在 Bootstrap 中也有更多的效果，可以变显示方向，但需要js的代码。...//让某一个提示框一上来就显示折叠菜单 1.单个折叠菜单制作步骤： 1、给要点击的那个元素添加一个 data-toggle="collapse"，并且需要给它添加一个data-target...1.把所有的面板都放到一个父级里，并且给父级添加一个panel-group，还有一个id 2.给要点击的元素添加一个data-parent属性，并让他的值与父级的id一样- 3.需要给内容区域添加一个

4.2K2 0

Bootstrap实用手册

文字使用相对尺寸(em,rem)，尽量不用绝对尺寸(px) CSS 中的 1px 并不代表真实物理设备的 1px，如：iPhone4 以后，屏幕为 Retina 屏幕，屏幕大小没有变化，但分辨率提升一倍...栅格布局好处：效率高，容易控制，实现响应式不足：没有栅格布局实际上就是由 div 组成的 table 样式的响应式结构使用方法： ①....导航条中的文本，普通文本需要增加 class .navbar-text 属性来保证格式语法：Text (5)....JS 插件.Bootstrap 基于 jQuery ，在 jQuery 基础上提供了十几个插件函数，每个都是一个独立的 JS 文件,可以一次性引入全部的 JS 操作 - bootstrap.js，每个插件函数都有两种调用方式...JS 插件－折叠效果 collapse.js (1). 触发元素 ①. data-toggle="collapse" href="#id"> ②.

8.3K2 0

Bootstrap 折叠（Collapse）插件

结果如下所示：正如您在实例中看到的，我们创建了一个可折叠的组件，与折叠面板（accordion）不同，我们没有添加属性 data-parent。...您可以通过以下两种方式使用折叠（Collapse）插件：通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。...data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。...下表列出了这些选项：选项名称类型/默认值 Data 属性名称描述 parent selector默认值：false data-parent 如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭...这与传统的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。 toggle boolean默认值：true data-toggle 切换调用可折叠元素。

1911 0

开心档之bootstrap折叠

实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ; 点击按钮后会在隐藏与显示之间切换。...控制内容的隐藏与显示，需要在或元素上添加 data-toggle="collapse" 属性。...data-target="#id" 属性是对应折叠的内容注意: 元素上你可以使用 href 属性来代替 data-target 属性: 实例 data-toggle... 默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示: 实例 Lorem ipsum dolor... 以下实例通过扩展卡片组件来显示简单的手风琴。注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

1.1K1 0

深入理解bootstrap

，比如使用类似于data-target的自定义属性等 2.JavaScrtip实现步骤：所有的插件都遵循jQuery插件开发的标准步骤，所有的事件都保持了统一标准 3.插件调用方法：所有插件的使用方式都非常类似...，用于将不同浏览器的默认CSS特性设置为统一效果的CSS库 4.居中容器：.container B.基础排版 1.样式.h1-6没有有margin，h1有，h1 .small显示稍小一点的字体，灰色...有额外的margin-bottom 3.相让一个段落突出显示，可以使用.lead样式，增大字体大小、粗细、行间距和margin-bottom 4.默认强调文本：small、strong、em、cite...="buttons" J.折叠 1.data-toggle="collapse"配合data-target=""使用，折叠区域使用collapse和in样式 2.默认隐藏折叠区域，触发元素上添加一个....collapsed样式，去掉折叠区域的in样式 3.JS用法：$(xxx).collapse(); K.旋转轮播 L.自动定位浮标 1.Affix的效果就是浮动的左右菜单 2.使用data-spy="

4.5K6 0

Bootstrap源码分析之nav、collapse

2、导航模块可以包含下拉模块 3、实现了水平、垂直、水平平均分配（table-cell实现，4.0移除）、tabs、胶囊等样式 4、Nav-divider：有一个像素的高度实现分隔线 5、Nav-stacked...：垂直对齐实现 6、提供了tab-content类，用于包裹tab，然后tab-pane做为内容区域，用于tab页的扩展 7、Nav-tabs下的dropdown做了位置向上收缩一个像素的处理，因为nav-tabs...：折叠效果实现 1、$this.data()收集所有data-*数据 2、Parent属性：指定当前这个collapse被那个父级所控制，主要实现一控多的效果，以下是隐藏同一父级下所有子列表代码：...，还需要整合.panel类，因为查找时认为所有子列表都是放在.panel类下的 4、Jquery的end（）方法：结束当前筛选链，并将匹配元素集还原为之前的状态（链开始的位置） $(“p”).find(...$element[0][scrollSize]) 6、对处理元素分为两类，一是要展开或隐藏的元素本身（$element），二是触发展开或隐藏元素的按钮（$trigger） 7、在hiden方法中，会重绘折叠区域的高度

2K8 0

Bootstrap 响应式框架第五集

可以由 a 或 button 来充当 1、 data-toggle="modal"...1、data-toggle="collapse" 2、href="#被折叠元素ID" 2、button 元素充当触发器...属性： 1、data-toggle="collapse" 2、data-target="#被折叠元素ID"...2、被折叠元素属性： 1、class="collapse" 2、id="" ，提供给触发器使用 2、手风琴...1、静态样式语言：css 可以直接被浏览器解析处理；但CSS并不是合格的"编程语言"，它缺少编程语言中的最基本的要素：变量，运算符 .... 。

2.3K1 0

BootStrap基础知识

如果想创建一个没有圆角的全荧幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现。...我们可以使用 CSS 的 height 属性来修改他可以在进度条内添加文本，如进度的百分比默认情况下进度条为蓝色，可以使用：bg-success、bg-info、bg-warning、bg-danger...可以在头部元素上使用 .card-title 类来设置卡片的标题。...data-target="#id" 属性是对应折叠的内容 ()。元素上你可以使用 href 属性来代替 data-target 属性。...默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容预设显示。导航(Navbar) 在父元素上添加nav类，在子元素上添加nav-item类，在链接上添加nav-link类来创建导航。

3.2K1 0

JQuery常用命令

即使没有查找到需要的元素，JQuery 类数组对象也不会是 null/undefined，调用 JQuery 函数不会报错 (3)....面试题：在操作元素的相关属性时，使用 attr()、val()、prop()、data()有何区别？...JQuery 中的函数第三部分：动画函数 — 折叠展开/收起动画折叠展开/收起动画函数通过使用定时器修改目标元素的height 一个样式的值来实现动画： (1). $(..).slideUp( )...JQuery 中的函数第三部分：动画函数 — 淡入/淡出动画淡入/淡出动画函数通过使用定时器修改目标元素的 opacity 一个样式的值来实现动画： (1). $(..).fadeIn( )...(1). width、height、opacity、fontSize....等等有可渐变属性值（数值型）的样式可以执行动画 (2). display、fontFamily、transform、颜色类属性等没有渐变属性值的样式不能执行动画

7.5K1 0

前端|Bootstrap——导航组件

通常都是利用列表实现来导航的，常用的是无序列表（）和有序列表（）。自定义列表（）一般不会用来实现导航。常见的导航菜单有标签式的导航菜单，胶囊式的导航菜单等等。...还可以向上面的元素添加role="navigation"，这样有助于增加可访问性，也可以不加，对于功能的实现没有很大的影响。...如果没有data-toggle="dropdown"的话，即使被定义为dropdown-toggle类，也不能实现动态的菜单下拉和收回的效果。...当添加 data-toggle="dropdown" 属性，就可以让下拉菜单默认隐藏，只有在点击按钮或链接时，它才显示出来。此外，这里的下拉菜单，还使用了使用来指示按钮作为下拉菜单。...这里需要注意aria-labelledby属性的作用是当想要的标签文本已在其他元素中存在时，可以将其值为该元素的id。tabindex="-1"：不允许使用tab键。

7.9K1 0

python测试开发django-136.Bootstrap 顶部导航navbar

Bootstrap 框架可以用 .navbar 快速实现这种页面效果 navbar导航 navbar导航组件常用的几个 class 属性 .navbar ——设置 nav 元素为导航条组件； .navbar-default...； .navbar-toggle ——设置 button 元素为导航条组件的切换钮； .collapsed ——设置 button 元素为在视口小于768px时才显示； .navbar-brand ——...设置导航条组件内的品牌图标； navbar-brand 默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下. 折叠后显示按钮--> data-toggle...--导航--> 页面效果小屏幕折叠效果

1.9K2 0

前端入门24-响应式布局（BootStrap）声明正文-响应式布局（BootStrap）

反正，BootStrap 本质就就是一个框架，封装了一系列的属性样式、组件给开发者使用，开发者只要了解有哪些属性样式可以用、有哪些组件可以用、效果怎么样、怎么用就可以了，至于这些，就只能是一步步在实际开发中...目前的代码里，我们完全没有写过 CSS，只在 HTML 文档中，添加了标签内容，就能够达到这样的页面效果了，所以，其实，BootStrap 已经封装好了一大堆属性样式，我们只要在标签上通过... 里的那个 navbar-toggler-icon 就是按钮的 icon，而之所以点击了后可以展开第一个就是由其他属性来控制。...所以，梳理一下，通过给添加 collapse 的 class 可以让这个区域折叠隐藏起来，然后给它设置一个 id；然后给控制这个折叠区域的按钮添加 data-toggle 和 data-target...属性，通过 id 来控制指定区域的折叠和展开。

4.5K2 0

【Bootstrap】013-组件：导航、导航条、路径导航

一、导航 1、概述 Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。...有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。...如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的；代码演示：的导航组件之外添加标准链接，那么，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置；代码演示：可以更容易的在各种尺寸的屏幕上处理导航条组件； 8、固定在顶部添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid

1.3K1 0

Bootstrap实用功能总结

折叠导航按钮（.navbar-toggle） 5、表单（.form-inline）一、导航容器一般使用nav标签来定义： ......：小屏幕上我们都会折叠导航栏，通过点击来显示导航选项： 1 2 <!...： 1、定义折叠按钮时除了折叠的属性之外，还必须加上样式： .navbar-toggler 2、折叠按钮内加上折叠图标，样式： .navbar-toggler-icon 3、菜单要包含一个容器内，容器必须包含样式...指明该选项是一个下拉菜单（下拉菜单也可以不用指定） a标签可用样式及属性 .nav-link 指定导航链接 .active 当前激活的导航链接 .disabled 禁用的导航链接 data-toggle...= "{tab | pill }" 定义一个动态选项卡或动态胶囊选项卡 href = "#id" 动态导航时，指明要显示的容器ID 动态选项卡容器样式 .tab-pane 动态选项卡容器类，必须要加

3.2K3 0

Bootstrap基础学习笔记

定义一个触发下拉的元素。...要和data-toggle="dropdown"属性结合使用 .dropdown-toggle-split 菜单分割线，作用未知菜单列表样式 .dropdown-menu 定义一个下拉菜单容器 .dropdown-menu-right...data-toggle="collapse" 折叠触发对象必需属性 data-target="#id" | href="#id" 折叠触发对象必需属性 .collapse 折叠目标对象样式 data-parent...="#id" 属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏。...触发元素要设置以下属性： data-toggle = "collapse" data-target = "#id" 或者链接的href代替此属性 href="#id" 触发下拉元素代码示例： <

6.6K3 1

Bootstrap 提示工具（Tooltip）插件

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。...您可以有以下两种方式添加提示工具（tooltip）：通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。...如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。...data 属性使用提示工具（Tooltip）插件的用法。...如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。

3251 0

点击加载更多

python测试开发django-188.Bootstrap折叠（Collapse）插件

Jump Start Bootstrap 第4章

BootStrap应用开发学习入门1

BootStrap应用开发学习入门1

Bootstrap学习文档（四）

Bootstrap实用手册

Bootstrap 折叠（Collapse）插件

开心档之bootstrap折叠

深入理解bootstrap

Bootstrap源码分析之nav、collapse

Bootstrap 响应式框架第五集

BootStrap基础知识

JQuery常用命令

前端|Bootstrap——导航组件

python测试开发django-136.Bootstrap 顶部导航navbar

前端入门24-响应式布局（BootStrap）声明正文-响应式布局（BootStrap）

【Bootstrap】013-组件：导航、导航条、路径导航

Bootstrap实用功能总结

Bootstrap基础学习笔记

Bootstrap 提示工具（Tooltip）插件

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐