可以直接引用 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 的折叠类公开了一些用于挂钩折叠功能的事件。
这个ul元素应该有类”dropdown-menu”。现在,我们有了一个简单的下拉菜单,在单击链接时显示菜单。我们可以在浏览器中查看它,如图所示。 ?...Bootstrap按钮有两个状态;active和inactive,active状态有一个类”active”,但inactive状态没有关联类;相反的,你可以用下面的代码创建一个简单的按钮并切换状态。...对于本体,我们需要一个包含类modal-body的元素。您可以将几乎任何内容放到该元素中。你甚至可以使用Bootstrap的网格系统来组织内容。...它应该有一个data-target属性来告诉Bootstrap,在一个网页中可以有多个模式对话框。我们还需要定义的data-toggle属性来确定单击时触发的内容。...元素,可以作为一个modal handle元素,可以包含一个包含链接的属性href。Bootstrap模式对话框有一个选项,当单击该句柄时,将该链接加载到它的modal-body元素中。
列表组(list-group) 描述:列表组件用于以列表形式呈现复杂的和自定义的内容,我们还可以向任意的列表项添加徽章组件,它会自动定位到右边; Class类说明: .list-group...分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。...分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。...赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。...常常和面板类class .panel 进行连用 基础属性: .panel-collapse #面板折叠类 .collapse #需要折叠的元素 .in #默认显示折叠元素
Bootstrap 官网,另外需要给滚动监听加上样式,不然还是没有效果的,使用起来不太简单。... data 属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行...但在 Bootstrap 中也有更多的效果,可以变显示方向,但需要js的代码。...//让某一个提示框一上来就显示 折叠菜单 1.单个折叠菜单 制作步骤: 1、给要点击的那个元素添加一个 data-toggle="collapse",并且需要给它添加一个data-target...1.把所有的面板都放到一个父级里,并且给父级添加一个panel-group,还有一个id 2.给要点击的元素添加一个data-parent属性,并让他的值与父级的id一样- 3.需要给内容区域添加一个
文字使用相对尺寸(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). 触发元素 ①. ②.
实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ; 点击按钮后会在隐藏与显示之间切换。...控制内容的隐藏与显示,需要在 或 元素上添加 data-toggle="collapse" 属性。...data-target="#id" 属性是对应折叠的内容 注意: 元素上你可以使用 href 属性来代替 data-target 属性: 实例 默认情况下折叠的内容是隐藏的,你可以添加 .show 类让内容默认显示: 实例 Lorem ipsum dolor... 以下实例通过扩展卡片组件来显示简单的手风琴。 注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下,这样就能实现在一个折叠选项显示时其他选项就隐藏。
,比如使用类似于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="
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方法中,会重绘折叠区域的高度
可以由 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并不是合格的"编程语言",它缺少编程语言中的最基本的要素:变量,运算符 .... 。
如果想创建一个没有圆角的全荧幕,可以在 .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类来创建导航。
即使没有查找到需要的元素,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、颜色类属性等没有渐变属性值的样式不能执行动画
Bootstrap 框架可以用 .navbar 快速实现这种页面效果 navbar导航 navbar导航组件常用的几个 class 属性 .navbar ——设置 nav 元素为导航条组件; .navbar-default...; .navbar-toggle ——设置 button 元素为导航条组件的切换钮; .collapsed ——设置 button 元素为在视口小于768px时才显示; .navbar-brand ——...设置导航条组件内的品牌图标; navbar-brand 默认是放文字的,也可以放图片,但必须是小图片,如果图片太大,位置就会靠下. 页面效果 小屏幕折叠效果
通常都是利用列表实现来导航的,常用的是无序列表()和有序列表()。自定义列表()一般不会用来实现导航。 常见的导航菜单有标签式的导航菜单,胶囊式的导航菜单等等。...还可以向上面的元素添加role="navigation",这样有助于增加可访问性,也可以不加,对于功能的实现没有很大的影响。...如果没有data-toggle="dropdown"的话,即使被定义为dropdown-toggle类,也不能实现动态的菜单下拉和收回的效果。...当添加 data-toggle="dropdown" 属性,就可以让下拉菜单默认隐藏,只有在点击按钮或链接时,它才显示出来。 此外,这里的下拉菜单,还使用了使用来指示按钮作为下拉菜单。...这里需要注意aria-labelledby属性的作用是当想要的标签文本已在其他元素中存在时,可以将其值为该元素的id。tabindex="-1":不允许使用tab键。
反正,BootStrap 本质就就是一个框架,封装了一系列的属性样式、组件给开发者使用,开发者只要了解有哪些属性样式可以用、有哪些组件可以用、效果怎么样、怎么用就可以了,至于这些,就只能是一步步在实际开发中...目前的代码里,我们完全没有写过 CSS,只在 HTML 文档中,添加了 标签内容,就能够达到这样的页面效果了,所以,其实,BootStrap 已经封装好了一大堆属性样式,我们只要在标签上通过... 里的那个 navbar-toggler-icon 就是按钮的 icon,而之所以点击了后可以展开第一个 就是由其他属性来控制。...所以,梳理一下,通过给 添加 collapse 的 class 可以让这个区域折叠隐藏起来,然后给它设置一个 id;然后给控制这个折叠区域的按钮添加 data-toggle 和 data-target...属性,通过 id 来控制指定区域的折叠和展开。
折叠导航按钮(.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 动态选项卡容器类,必须要加
定义一个触发下拉的元素。...要和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" 触发下拉元素代码示例: <
必须在 内使用 关于表格存储内容的描述或总结 好看的类样式 .table 为任意 添加基本样式 (只有横向分隔线) .table-striped 在...包裹 内部点击按钮事件绑定 data-toggle="dropdown" 菜单元素使用 class="dropdown-menu" 分页组件 栅格系统 Bootstrap 的栅格系统会将整个页面水平方向上平均分成 12 个小格子 当浏览器大小发生变化的时候,我们可以控制每行的元素占用几个格子,从而达到响应式的效果 ...-- data-toggle="collapse" 数据切换的事件,特效是折叠--> <button class="navbar-toggle" data-toggle="
CSS组件 下拉菜单 .dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。 data-toggle属性:下拉菜单触发器。取值为“dropdown”。...在这里呢,如果我们下拉菜单很多,就可以用滚动条来解决! 用overflow: auto;,然后定义一个高度就好。...导航栏 导航栏有一个不同,他不是写在container包含层里面了,而是那个div的上面! .navbar:导航栏的基类,用于元素。....navbar-brand:设置品牌图标样式 .collapse是折叠导航栏的样式的基类。 .navbar-collapse是折叠导航栏样式。 .nav是导航栏的链接基类。....navbar-btn:对于不在中的元素,实现垂直对齐。 .navbar-text:对于导航栏的普通文本有了行距和颜色,通常用于元素。
通过添加data attribute(data 属性)可以轻松的使用这些插件,当然你也可以使用编程方式的API来使用。...="modal"属性到Button或者Anchor元素上即可,同时,为了表示展示哪一个模态框,需要通过data-target来指定模态框的Id。... 你可以添加data-toggle="tooltip"来使用tooltip,当然你也可以设置内容的显示位置,通过添加data-placement属性来实现,Bootstrap为我们提供了4种位置...) 弹出框和Tooltip类似,都可以为用户提供额外的信息,但弹出框可以展示更多的信息,比如允许我们展示一个Header和Content,如下所示: <a data-content="关于基础建设问题需要有具体<em>的</em>研讨和商量...手风琴组件(collapse.js) 手风琴组件<em>有</em>若干panel groups组成,每<em>一个</em>panel group依次包含了若干header和content <em>元素</em>,最常见<em>的</em><em>使用</em>场景就是FAQ,如下所示:
领取专属 10元无门槛券
手把手带您无忧上云