前言 折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。...可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠（Collapse） 以使用带有属性的链接href或带有属性的按钮data-target。...在可折叠元素实际显示或隐藏之前（即在or事件发生之前）返回给调用者。shown.bs.collapse, hidden.bs.collapse `.collapse('show') 显示可折叠元素。...在可折叠元素实际显示之前（即在事件发生之前）返回给调用者。shown.bs.collapse .collapse(‘hide’) 隐藏可折叠元素。...在可折叠元素实际被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.collapse Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。
显示/隐藏类Bootstrap提供了一些用于控制元素在不同屏幕尺寸下显示或隐藏的类。这些类可以根据需要在不同的断点上添加或移除。...以下是Bootstrap提供的显示/隐藏类：.d-none：在所有断点上隐藏元素。.d-{breakpoint}-none：在指定断点上隐藏元素，例如.d-sm-none在小屏幕上隐藏元素。....d-{breakpoint}-block：在指定断点上以块级元素显示元素。.d-{breakpoint}-inline：在指定断点上以内联元素显示元素。....d-{breakpoint}-inline-block：在指定断点上以内联块元素显示元素。通过使用这些显示/隐藏类，可以根据不同屏幕尺寸来控制元素的可见性，从而实现更好的响应式布局。...宽度调整类Bootstrap还提供了一些宽度调整类，用于根据需要在不同屏幕尺寸上调整元素的宽度。
“列（column）”在水平方向创建一组列col,只有列能作为行的直接子元素.row .col-xs-4 通过列设置padding属性，通过为.row 元素设置负值 margin 从而抵消掉为 .container...为了克服这一问题，建议联合使用 .clearfix和响应式工具类 *如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。...四，响应式工具类 通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。...除了 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。 打印类 和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。...可见 隐藏 .visible-print 类也是存在的，但是从 v3.2.0 版本开始不建议使用。
答:字体图标是在 Web 项目中使用的图标字体,可以通过基于项目的 Bootstrap 来免费使用这些图标。...注意事项: .navbar-btn 可被使用在 和 元素上, 不要在 .navbar-nav 内的 元素上使用 .navbar-btn，因为它不是标准的 button class...徽章（Badges） 描述:徽章与标签相似，主要的区别在于徽章的边角更加圆滑,主要用于突出显示新的或未读的项, 添加 到链接、Bootstrap 导航等这些元素上即可...常常和面板类class .panel 进行连用 基础属性: .panel-collapse #面板折叠类 .collapse #需要折叠的元素 .in #默认显示折叠元素...语法: (1)通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。...需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。...: inline; .visible-*-inline-block display: inline-block; 因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block...除了 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。 打印类 下表列出了打印类。使用这些切换打印内容。...调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类。
1.3.2 ViewPort 概念： 视窗指的是用户在网页上的可见性，根据设备的不同而不同。...minimum-scale：允许用户缩放到的最小比例。 1.3.3 网格视图 在设计网页时，使用网格视图非常有用。它可以更轻松地在页面上放置元素。...使用行样式row来创建水平的列组。 内容需要放置在列中，并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。...详见W3School,部分案例 三.BootStrap布局组件 通过使用Bootstrap的图片响应式类.img-responsive，你可以让图片适配手机显示！...它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。
.form-inline 类可使其内容左对齐并且表现为 inline-block 显示方式。...为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。...为 a、button 或 input 元素添加按钮类 .btn 即可使用 Bootstrap 提供的样式。...，并用于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=“button” 属性 尽可能使用 button 元素来获得在各个浏览器上获得相同的显示效果...当你需要让按钮具有不同尺寸的时候，同样是使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
正确的伪类样式的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} (6) 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法...因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化，往往会出现浏览器之间的页面显示出现差异。 (15) 说说你对边距折叠的理解?...外边距折叠（margin塌陷）： 相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin） 什么时候会造成margin塌陷？ 相邻的元素都在普通流中。...在不同浏览器下有什么区别 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用 在Chrome中，如果此值在非表格元素上使用，与hidden值没有什么区别...在Firefox、Opera和IE中，如果此值在非表格元素上使用，与display:none没有什么区别。 (19) 用 position: absolute 跟用 float 有什么区别吗 ？
规则如下： 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠 创建了块级格式化上下文的元素...inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。...：hidden; 在IE6中还需要触发 hasLayout，例如zoom：1; 父元素也设置浮动 使用 :after 伪元素。...伪元素 -- 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。 它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。...16.7ms 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔: 1s / 60 * 1000 ＝ 16.7ms display:inline-block 什么时候会显示间隙？
Bootstrap 提供了各种预定义的 CSS 样式、JavaScript 插件以及其他组件，可以在项目中重复使用，从而加速开发过程。...Bootstrap 的优势包括： 响应式设计：Bootstrap 可以轻松创建适应不同设备和屏幕尺寸的网页，确保您的网站在各种设备上都能够良好显示。... 元素：这是链接元素，用于显示网站的标志。 元素：这是按钮元素，通常用于在小屏幕上切换导航栏的可见性。...class="navbar-toggler-icon"：这是 Bootstrap 提供的按钮图标，用于在小屏幕上切换导航栏的可见性。 class="navbar-nav"：这是导航条的导航项容器。...您可以更改分页按钮的样式、显示的页数、上一页和下一页的文字等。
伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。 任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。...CSS3对于伪元素的定义 伪元素在DOM中创建了一些抽象元素，这些对象不存在与常文档流中。 伪元素由两个冒号::开头，然后是伪元素的名称。 使用两个冒号::是为了和伪类（CSS2中并没有区别）做区分。...简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。 伪类和伪元素的区别 伪类本质上是为了弥补常规CSS的不足，以便获取更多信息。...浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠 浮动元素的 margin 在垂直方向上也不会发生 margin 折叠，即使和它相邻的子元素也不会...将多个小图标he拼接到一张图片里，通过background-position和元素尺寸调节需要显示的背景图案。
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。... 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ; 点击按钮后会在隐藏与显示之间切换。...控制内容的隐藏与显示，需要在 或 元素上添加 data-toggle="collapse" 属性。...data-target="#id" 属性是对应折叠的内容 注意: 元素上你可以使用 href 属性来代替 data-target 属性: 实例 以下实例通过扩展卡片组件来显示简单的手风琴。 注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。
$("#collapseExample").attr("display","none"); collapseExample 可能是 Bootstrap 框架中的一个折叠元素（Collapse），当点击某个触发器时...在这种情况下，调用 $("#collapseExample").css("display", "none") 的目的是将折叠元素隐藏，使其在页面中不可见。...通常情况下，应该将折叠元素设置为默认隐藏，然后通过点击触发器来显示它。...需要注意的是，display: none 样式将使元素被完全隐藏且不会占用空间，因此在折叠元素中使用该样式可以有效地控制页面布局和交互效果。...在 jQuery 中，如果需要修改样式，应该使用 .css() 方法。
inline-block 的特点是元素依然具有块级元素的宽高，但可以在一行内并排显示。...，或在容器元素上使用overflow: hidden或clearfix类。...浮动元素的顺序问题 使用浮动布局时，元素的顺序是固定的，即元素在HTML文档中的排列顺序决定了它们在页面上的显示顺序。这对于需要不同屏幕大小下重新排序的响应式布局来说是一个很大的限制。...其他特性： Offset列：使用offset类为列增加空白间距。 Order类：使用order类轻松改变列的显示顺序。...兼容性：Bootstrap在社区和第三方支持上稍显优势，因为它的用户和扩展库更多。 两者都非常强大，选择使用哪个框架通常取决于项目需求以及开发团队的偏好。
触发BFC的常见条件 满足以下条件之一即可触发： HTML元素 浮动元素 float != none 溢出内容不可见的元素 overflow !...= visible 行内块元素 display = inline-block 绝对定位元素 position = absolute或fixed 弹性元素（flex）、网格元素（grid）的直接子元素 多列容器...，layout声明外部元素与内部元素互不影响，content在layout的基础上声明子元素也不会在content-box外（padding，border，margin）显示，并且counter等具有影响其他元素能力的属性也会被隔离...，strict在layout的基础上必须声明宽高，因为在此模式下子元素不能撑开父元素 与表格有关的一些属性 BFC布局特性 浮动定位与清除浮动都只会影响同一个BFC内的元素。...独立的BFC区域不会被浮动元素覆盖，但可以包含。 外边距折叠（Margin collapsing）只发生在同一BFC中的块级元素间。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。...3）两个外边距一正一负时，折叠结果是两者的相加的和。 7. Sass、LESS是什么？大家为什么要使用他们？ 他们是CSS预处理器。他是CSS上的一种抽象层。...即对inline-block元素可以设置宽度和高度，同时inline-block元素又可以在同行进行排列。 备注：属性为inline-block元素之间的空格或者换行在浏览器上会是一个空白的间隙。...设置左右margin为auto 3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值 11.CSS优先级算法如何计算？...假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来， 而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法 当媒体查询为真时
class的元素上，然而，它并不能限制一个使用链中所有class的元素。...上面的例子会定位每一个父级元素下的第一个a标签，并将hover伪类P应用到它上。...:"本段文字在盒子前面";} #box:after { content:"本段文字在盒子后面";} 描述 这两个伪元素分别在指定元素的前面和后面添加生成的内容，结合content属性一起使用...IE6 Bugs 不支持用样式设置 元素 不支持以连字符和下划线开头的class和ID名 元素总是出现在堆叠最上面，而无视z-index值 如果锚点的伪类没有使用正确的顺序...line-through 值在文字上看起来比别的浏览器要高一些 有序列表如果有一个固定结构(haslayout为true，不能设置li的高度/宽度/zoom等激活haslayout的值)，序号就不会增加
d-inline-flex 创建显示在同一行上的弹性盒子容器可以使用 flex-row 可以设置弹性子元素水平显示(预设) flex-row-reverse 类用于设置右对齐显示，即与 .flex-row...可以在头部元素上使用 .card-title 类来设置卡片的标题 。...需要将 .active 添加到其中一个轮播元素上，否则轮播将不可见。另外一定要在 .carousel 上为控制项元件设置一个唯一的 id，特别是当你在一个页面上使用多个轮播的时候。...默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容预设显示。 导航(Navbar) 在父元素上添加nav类，在子元素上添加nav-item类，在链接上添加nav-link类来创建导航。...内联表单需要在 元素上添加 .form-inline 类 所有内联表单中的元素都是左对齐的 在荧幕宽度 小于 576px 时为垂直堆叠，如果荧幕宽度 大于等于 576px 时表单元素才会显示在同一个水平线上
在输入框外面定义一个div标签，class属性设置.form-group 、 和 元素设置 .form-control 类，将被默认设置宽度属性为 width...此时不需要for属性，绑定的控件也不需要id属性。....form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。...只适用于窗口（viewport）至少在 768px 宽度时（窗口宽度再小的话就会使表单折叠）。...水平排列表单 form-horizontal 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
