可以直接引用 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="
可以由 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、导航模块可以包含下拉模块 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方法中，会重绘折叠区域的高度
如果想创建一个没有圆角的全荧幕，可以在 .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类来创建导航。
Bootstrap 框架可以用 .navbar 快速实现这种页面效果 navbar导航 navbar导航组件常用的几个 class 属性 .navbar ——设置 nav 元素为导航条组件； .navbar-default...； .navbar-toggle ——设置 button 元素为导航条组件的切换钮； .collapsed ——设置 button 元素为在视口小于768px时才显示； .navbar-brand ——...设置导航条组件内的品牌图标； navbar-brand 默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下. 页面效果 小屏幕折叠效果
即使没有查找到需要的元素，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、颜色类属性等没有渐变属性值的样式不能执行动画
通常都是利用列表实现来导航的，常用的是无序列表（）和有序列表（）。自定义列表（）一般不会用来实现导航。 常见的导航菜单有标签式的导航菜单，胶囊式的导航菜单等等。...还可以向上面的元素添加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="
通过添加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，如下所示：
CSS组件 下拉菜单 .dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。 data-toggle属性：下拉菜单触发器。取值为“dropdown”。...在这里呢，如果我们下拉菜单很多，就可以用滚动条来解决！ 用overflow: auto;，然后定义一个高度就好。...导航栏 导航栏有一个不同，他不是写在container包含层里面了，而是那个div的上面！ .navbar：导航栏的基类，用于元素。....navbar-brand：设置品牌图标样式 .collapse是折叠导航栏的样式的基类。 .navbar-collapse是折叠导航栏样式。 .nav是导航栏的链接基类。....navbar-btn：对于不在中的元素，实现垂直对齐。 .navbar-text：对于导航栏的普通文本有了行距和颜色，通常用于元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
