Bootstrap|Bootstrap 发布十周年，Bootstrap 5都有什么新功能（） Bootstrap发布十周年，Bootstrap5都

近日，知名前端工具包 Bootstrap 官博宣布十周年，其创始人 Mark Otto 回顾了这十年里取得的一些成就与里程碑数据：

文档浏览量超过 25 亿次，每天超过 685,000 次；
自 2015 年以来，npm 下载量为3.94 亿，仅 2020 年就有超过 1.31 亿次下载。在过去的六年中，每天有 180,000 次。
5000 万次 RubyGems 下载
5700 万次 NuGet 下载
750 万次 Packagist 安装
被超过 22% 的网站使用
被 GitHub 上的 270 万个项目使用
在 GitHub 上超过 21,100 次提交，其中包含近 35,000 个问题和拉取请求

Bootstrap|Bootstrap 发布十周年，Bootstrap 5都有什么新功能（）

文章图片

Bootstrap 是最流行的 CSS 库之一。它允许开发人员轻松使用漂亮的样式和组件并创建响应式网站。使用 Bootstrap 可以节省开发人员的时间，尤其是对于几乎每个项目中都使用的组件。
Bootstrap 5（当前的主要版本，于 2021 年 5 月发布）带来了大量的变化和改进，包括添加新组件、新类、旧组件的新样式、更新的浏览器支持、删除一些旧组件，以及更多。
在本文中，我们将介绍 Bootstrap 5 中的更改、删除的内容，以及最令人兴奋的新内容。
何时使用 Bootstrap（何时不使用） Bootstrap 将自己标榜为“世界上最流行的用于构建响应式、移动优先站点的框架”，并且在 GitHub 上拥有 152k 颗星，我认为这种说法并不过分。特别是对于初学者来说，Bootstrap 是开始创建现代和干净网站的好方法。它可以轻松实现复杂的、移动优先的设计，并提供您在多个项目中可能需要的许多组件。
Bootstrap的学习曲线很低，很适合不需要构建步骤的静态网站，因为你可以直接从Bootstrap的CDN引用库。这与其他一些流行的CSS框架形成鲜明对比，这些框架可能为使用捆绑器或任务运行器进行优化。
不过，你也应该知道，Bootstrap并不是一颗银弹。对于没有经验的人来说，Bootstrap很容易产生混乱和复杂的标记。就千字节而言，它也是一个相对较重的库（尽管每次发布都在改进），所以如果你只使用它的一两个功能，它可能不是最佳选择。就像任何抽象一样，如果你对底层技术有很好的掌握，并能对何时使用它做出明智的决定，那将会有很大的帮助。
从 Bootstrap 4 升级到 5 从Bootstrap 4升级到5一般来说是很容易的。Bootstrap 4中的大部分组件、它们的类和实用类在Bootstrap 5中仍然可用。在迁移时，您应该关注的主要事情是您正在使用的类或组件是否已经被删除。如果它们被删除了，那么可以使用实用工具类替换它们，或者使用其他方法来实现相同的结果。你应该关注的第二件事是在组件中从 data- 属性转换到 data-bs-，这些组件需要JavaScript作为其功能的一部分。(我们将在下一节中详细介绍这一点。)
如果你使用Bootstrap的Sass文件，有一些变量和mixin被重命名。Bootstrap 5有一个广泛和详细的部分，所有关于定制，以及关于每个组件的Sass变量和mixin的详细信息，在他们各自的文档页面。
变化的内容 Bootstrap 5 为作为库的 Bootstrap 带来了核心更改，包括所需依赖项、浏览器支持等方面的更改。它还对我们在以前版本中一直使用的组件和类进行了更改。
jQuery不再是一个依赖项
与之前的版本相比，jQuery 不再是 Bootstrap 的依赖项。现在，你可以在没有它的情况下充分利用 Bootstrap，但你仍然需要 Popper.js。这一变化使得在不需要或使用 jQuery 的项目中使用 Bootstrap 变得更容易——例如在将 Bootstrap 与 React 结合使用时。
如果Bootstrap是你网站的一部分，你仍然可以使用jQuery。如果Bootstrap在 window 对象中检测到jQuery，它会自动将所有组件添加到jQuery的插件系统中。因此，如果您从v4迁移到v5，就不需要担心这个更改，并且仍然可以在必要时使用jQuery和Bootstrap。
但如果你在网站中使用jQuery，但你不希望Bootstrap使用jQuery呢?你可以通过在文档的body元素中添加属性 data-bs-no-jquery 来实现：

没有jQuery，Bootstrap是如何工作的？例如，在v4中，你可以在JavaScript中使用以下代码来创建一个Toast元素。

$('.toast').toast()

在Bootstrap 5中，如果你的网站已经使用了jQuery，你可以使用同样的代码来创建一个Toast元素。如果没有jQuery，你需要使用类似下面的代码来创建一个Toast元素：

const toastElList = [...document.querySelectorAll('.toast')] const toastList = toastElList.map((toastEl) => { return new bootstrap.Toast(toastEl) })

这只是使用原生JavaScript来查询文档中具有 .toast 类的元素，然后使用 new bootstrap.Toast() 在元素上初始化一个Toast组件。
浏览器支持更改
在 v4 之前，Bootstrap 曾经支持 Internet Explorer (IE) 10 和 11。从 Bootstrap 5 开始，对 IE 的支持已完全取消。因此，如果您的网站需要支持 IE，则在迁移到 v5 时可能应该小心。
浏览器支持的其他变化包括：

Firefox和Chrome现在从60版开始支持
Safari和iOS支持现在从版本12开始
Android浏览器和WebView支持现在从版本6开始

数据属性的更改
Bootstrap 5改变了数据属性的命名方式，这些数据属性通常被其使用JavaScript作为功能的一部分的组件所使用。以前，大多数依赖某些JavaScript功能的组件的数据属性都是以 data- 开头。例如，要在Bootstrap 4中创建一个Tooltip组件：

请注意 data-toggle 和 data-placement 的用法。在Bootstrap 5中，这些组件的数据属性现在以 data-bs 开头，以方便命名Bootstrap属性。例如，要在Bootstrap 5中创建一个Tooltip组件：

我们不使用 data-toggle 和 data-placement ，而使用 data-bs-toggle 和 data-bs-placement。如果你在Bootstrap中使用JavaScript来创建组件，可能不需要做任何改变。但是，如果你的组件只依靠数据属性来运作，你需要将所有以data开头的数据属性改为以 data-bs 开头。
修复了一些Bug
在 Bootstrap 4 的“浏览器和设备”下的文档中，列出了一些浏览器上发生的Bug。这些Bug不再列在 Bootstrap 5 的同一列表中。该列表包括以下内容：

在iOS上，鼠标悬停样式被应用到触摸事件的元素上，这是不可取的，因为它被认为是一个意外的行为。
在Safari 8及以上版本中使用 .container 会导致打印时字体变小。
Border radius被验证反馈所覆盖（但可以通过增加一个额外的 .has-validation 类来解决）。

Bootstrap 4文档中的bug和问题列表还详细说明了在不再支持的浏览器版本中出现的bug。
其他变化
还有更多的变化，要么是微小的，要么不会引起剧烈的、值得注意的变化。这些变化是：

Bootstrap 5现在使用Popper v2。确保升级你的Popper版本。Popper v1将不再工作，因为Bootstrap 5需要 @popperjs/core 而不是以前的 Popper.js。
现在，Bootstrap 5可以作为一个模块在浏览器中使用，使用的是作为ECMAScript模块构建的Bootstrap版本。
由于Libsass和Node Sass (Bootstrap 4中使用的)现在已弃用，Bootstrap 5使用Dart Sass将源Sass文件编译为CSS。
以前，为了使一个元素隐藏，但又能让辅助技术发现它，可以使用 .sr-only 类。现在这个类被替换为 .visually-hidden。
以前，为了使一个交互式元素隐藏起来，但又能让辅助技术发现它，你需要同时使用 .sr-only 和 .sr-only-focusable 类。在Bootstrap 5中，你只需要使用 .visually-hidden-focusable 而不需要 .visually-hidden。
具有命名来源的Blockquotes现在由
元素包裹。以下是 Bootstrap 5 中 Blockquotes 现在的示例：

文章图片
在以前的版本中，表的样式是继承的。这意味着，如果一个表嵌套在另一个表中，嵌套的表将继承父表。在Bootstrap 5中，表格样式是相互独立的，即使它们是嵌套的。
Border utilities现在支持表格。这意味着你现在可以使用边框颜色工具改变表格的边框颜色。下面是一个在Bootstrap 5中使用表格的border utilities的例子。

文章图片
面包屑的默认样式已经更改，删除了在以前版本中默认的灰色背景、填充和边框半径。下面是 Bootstrap 5 中面包屑样式的示例：

文章图片
使用 left 和 right 来引用使用 start 和 end 的位置的类的命名已更改。例如，下拉列表中的 .dropleft 和 .dropright 分别替换为 .dropstart 和 .dropend 。
与前一点类似，使用 l 表示左和 r 表示右的实用程序类现在分别使用 s 表示开始和 e 表示结束。例如，.mr-* 现在是 .me-*。
用于范围输入的 .form-control-range 类现在是 .form-range。
Gutters现在设置为 rem，而不是以前的 px。
.no-gutters 已经被改名为 .g-0，作为新添加的Gutters类的一部分（在后面的章节中会有更多介绍）。
链接现在默认下划线，即使没有悬停。
自定义表单元素类的名称已经从 .custom-* 变成了表单组件类的一部分。例如，.custom-check 被 .form-check 所取代，.custom-select 被 .form-select 所取代，以此类推。
现在需要在标签中添加 .form-label。
Alert、面包屑、卡片、下拉菜单、列表组、模态、弹出窗口和工具提示现在使用相同的填充值，使用 $spacer 变量。
徽章元素中的默认填充现在从 .25em/.5em 更改为 .35em/.65em。
切换按钮的封装器被用于复选框和单选按钮。现在的标记也被简化了。在Bootstrap 4中，切换按钮的复选框是通过以下标记实现的：

Checked

在Bootstrap 5中，可以用一种更简单的方式来完成：

Checked
按钮的 active 和 hover 状态在颜色上增加了对比。
关闭按钮类现在从 .close 重命名为 .btn-close，并使用SVG图标而不是 ×。
下拉分割线现在更暗，以更好的对比。
Navbar内容现在应该被包装在容器元素中。例如在Bootstrap 4中：

Navbar ...

在 Bootstrap 5 中变成：

Navbar ...
popover 组件中的 .arrow 类现在被 .popover-arrow 替换，Tooltip 组件中的 .arrow 类现在被 .tooltip-arrow 替换。
默认 Toast 持续时间更改为 5 秒。
工具提示、下拉菜单和弹出窗口组件中 fallbackPlacements 的默认值已更改为数组 ['top', 'right', 'bottom', 'left']。
.text-monospace 已重命名为 .font-monospace。
.font-weight-* 已重命名为 .fw-*，.font-style-* 已重命名为 .fst-*。
.rounded-sm 和 .rounded-lg 现在已被一系列从 0 到 3 的四舍五入类 .rounded-* 所取代。

有什么新东西？最后，在版本5中，Bootstrap为它的库添加了许多令人兴奋的新功能。其中一些变化包括新的特性、新的受支持的概念、新的组件、新的实用程序类等等。
响应式字体大小现在是默认启用
响应性字体大小（RFS）在以前的Bootstrap版本中出现过，但默认是禁用的。Bootstrap 5默认启用了RFS，使Bootstrap中的字体更具响应性。RFS是Bootstrap创建的一个辅助项目，最初是为了响应地缩放和调整字体大小。现在，它也能为margin、padding、box-shadow等属性做同样的事情。
它所做的基本上是根据浏览器的尺寸计算出最合适的数值，这些计算在编译时被翻译成计算函数。使用RFS也抛弃了以前使用px的做法，而使用rem，因为它有助于实现更好的响应性。
如果你在Bootstrap中使用Sass文件，你现在可以使用由RFS制作的mixins，包括字体大小、边距、填充等等，这允许你确保你的组件和样式是响应的。
从右到左的支持
Bootstrap 5使用RTLCSS增加了从左到右（RTL）的支持。由于Bootstrap在全世界范围内使用，因此，开箱即提供RTL支持是一个重要的步骤。出于这个原因，Bootstrap 5 放弃了特定的方向命名（例如，使用 left 和 right），转而使用 start 和 end。这使得 Bootstrap 足够灵活，可以同时处理从左到右 (LTR) 和 RTL 的网站。例如，.dropleft 现在是 .dropstart，.ml-* 现在是 .ms-*，等等。
为了让Bootstrap识别并在你的网站上应用RTL风格，你需要将的 dir 设置为 rtl，并添加一个带有网站RTL语言的 lang 属性。例如，lang="ar"。
最后，你需要包含Bootstrap的RTL CSS文件：

这样，你的网站就可以支持RTL了。
新组件
Bootstrap 5 为库带来了一些新组件。其中一些组件是其他组件的一部分，现在是独立组件。
Accordion 手风琴以前，Accordion是Collapsible组件的一部分，而不是它自己的组件。在Bootstrap 5中，Accordion是一个新的组件。Accordion有一个新的类，即 .accordion，它里面有一个accordion项目的列表。此外，与之前Bootstrap 4中的风格相比，Accordion有一个新的风格。下面是accordion组件的一个例子。

Offcanvas 重叠侧边栏另一个新组件是 Offcanvas，它允许您创建一个重叠的侧边栏。这个侧边栏通常用于在小型设备上显示菜单。你可以通过在LTR中使用 .offcanvas-start 代表左边，.offcanvas-top 代表上面，.offcanvas-end 代表LTR中的右边，以及 .offcanvas-bottom 代表下面，将其放置在页面的任何一边。你也可以指定Offcanvas是否应该有背景。下面是Offcanvas组件的使用示例：

Floating Label 浮动标签 Floating Label 是 Form 组件的一个新组件。它允许你创建一个输入，其标签一开始看起来像一个占位符，然后当输入收到焦点时，标签会浮动到输入的顶部，高于数值。它也适用于元素和

</code> 元素。以下是使用浮动标签的示例：<br />
 
 <img alt="Bootstrap|Bootstrap 发布十周年，Bootstrap 5都有什么新功能（）"
onload="javascript:ImgReSize(this)" src="https://img.it610.com/image/info9/f297a681783b4f05a5534867bd77c00a.gif"/> <br />
文章图片 <br />
<br />
 
 除了新的组件，还有现有组件的新类、新的实用类、新的辅助类，以及更多。<br />
 
 <strong>【Bootstrap|Bootstrap 发布十周年，Bootstrap 5都有什么新功能（）】</strong>更多信息：https://www.sitepoint.com/bootstrap-5-new-features-examples<br />
</p>
<div class="dede_pages"><ul></ul></div>
		  	<div class="pcd_ad">
<center><div class="_ahwullr0ac"></div>
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: "u6834461",
            container: "_ahwullr0ac",
            async: true
        });
    </script>
    <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
    </script></center>
</div>
<div class="mbd_ad">
<div style=margin-top:10px;margin-bottom:10px;>
<div class="_i7aftr79jl"></div>
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: "u5950612",
            container: "_i7aftr79jl",
            async: true
        });
    </script>
    <!-- ����������½ű�ֻ������һ�� -->
    <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
    </script>
</div>
</div>
<h3>推荐阅读</h3>
<ul class="post-loop post-loop-default cols-0">
           <li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3779792.html" title="同类色对比照片 摄影同类色"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="同类色对比照片 摄影同类色" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3779792.html"> <b>同类色对比照片 摄影同类色 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2140698.html" title="珂的意思和含义"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="珂的意思和含义" src="http://img.readke.com/230518/234F05K2-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2140698.html"> <b>珂的意思和含义 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1613798.html" title="聊城有哪些县 聊城都有哪些区县"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="聊城有哪些县 聊城都有哪些区县" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1613798.html"> <b>聊城有哪些县 聊城都有哪些区县 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2647708.html" title="为什么像汉字一样的象形文字很少,多数语言是拼音文字呢？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="为什么像汉字一样的象形文字很少,多数语言是拼音文字呢？" src="http://img.readke.com/230707/15161T2S-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2647708.html"> <b>为什么像汉字一样的象形文字很少,多数语言是拼音文字呢？ </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1211355M32021.html" title="button的超级链接"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="button的超级链接" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1211355M32021.html"> <b>button的超级链接 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2547204.html" title="支付宝商户如何开通花呗收款？花呗收钱开通的方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="支付宝商户如何开通花呗收款？花呗收钱开通的方法" src="http://img.readke.com/230617/1IT62Y2-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2547204.html"> <b>支付宝商户如何开通花呗收款？花呗收钱开通的方法 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1314482.html" title="画新娘妆和盘头多少钱，画一个新娘妆大概多少钱"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="画新娘妆和盘头多少钱，画一个新娘妆大概多少钱" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1314482.html"> <b>画新娘妆和盘头多少钱，画一个新娘妆大概多少钱 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1389770.html" title="坐飞机可以戴隐形眼镜吗？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="坐飞机可以戴隐形眼镜吗？" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1389770.html"> <b>坐飞机可以戴隐形眼镜吗？ </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2438458.html" title="茯苓绿豆粥——清热祛湿利尿消肿"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="茯苓绿豆粥——清热祛湿利尿消肿" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2438458.html"> <b>茯苓绿豆粥——清热祛湿利尿消肿 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1179299.html" title="嘉宝果泡酒多久可以喝"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="嘉宝果泡酒多久可以喝" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1179299.html"> <b>嘉宝果泡酒多久可以喝 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3191863.html" title="星巴克全职星级咖啡师面试难吗？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="星巴克全职星级咖啡师面试难吗？" src="http://img.readke.com/230930/0419442526-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3191863.html"> <b>星巴克全职星级咖啡师面试难吗？ </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/4095722.html" title="建筑软件,我的世界导入建筑软件"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="建筑软件,我的世界导入建筑软件" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/4095722.html"> <b>建筑软件,我的世界导入建筑软件 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3748407.html" title="听书 安卓1.5,喜马拉雅蜻蜓fm懒人听书不错!"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="听书 安卓1.5,喜马拉雅蜻蜓fm懒人听书不错!" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3748407.html"> <b>听书 安卓1.5,喜马拉雅蜻蜓fm懒人听书不错! </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1587361.html" title="医保卡余额怎么用 医保卡余额使用技巧"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="医保卡余额怎么用 医保卡余额使用技巧" src="http://img.readke.com/230416/02221644E-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1587361.html"> <b>医保卡余额怎么用 医保卡余额使用技巧 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/09111934562021.html" title="iOS|iOS 碰撞角度矫正 及 applyImpulse 和 applyForce的区别"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="iOS|iOS 碰撞角度矫正 及 applyImpulse 和 applyForce的区别" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/09111934562021.html"> <b>iOS|iOS 碰撞角度矫正 及 applyImpulse 和 applyForce的区别 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1929642.html" title="唇色发紫日常养护 嘴唇发黑是什么原因"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="唇色发紫日常养护 嘴唇发黑是什么原因" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1929642.html"> <b>唇色发紫日常养护 嘴唇发黑是什么原因 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1036784.html" title="为什么梦见打雪仗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="为什么梦见打雪仗" src="http://img.readke.com/230218/140521L20-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1036784.html"> <b>为什么梦见打雪仗 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2716532.html" title="榴莲一半硬一半软是什么原因"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="榴莲一半硬一半软是什么原因" src="http://img.readke.com/230713/1531291949-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2716532.html"> <b>榴莲一半硬一半软是什么原因 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2287767.html" title="顾炀樊渊是哪部小说"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="顾炀樊渊是哪部小说" src="http://img.readke.com/230528/021S9E53-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2287767.html"> <b>顾炀樊渊是哪部小说 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2314570.html" title="梦见理发 你知道预示着什么吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="梦见理发 你知道预示着什么吗" src="http://img.readke.com/230529/0P43QE8-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2314570.html"> <b>梦见理发 你知道预示着什么吗 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>

          </ul>
<p><br /><ul class="post-loop post-loop-list cols-4"><li><a href="/c/021T563a2022.html" title="图文小编《杨浦、成毅》为你发布！无价之宝随意摆放的公园" target="_blank">图文小编《杨浦、成毅》为你发布！无价之宝随意摆放的公园 
</a></li> <li><a href="/c/021J552L2022.html" title="用npm发布一个包的教程并编写一个vue的插件发布" target="_blank">用npm发布一个包的教程并编写一个vue的插件发布 
</a></li> <li><a href="/c/021J551052022.html" title="【译】Rails|【译】Rails 5.0正式发布（Action Cable，API模式等）" target="_blank">【译】Rails|【译】Rails 5.0正式发布（Action Cable，API模式等） 
</a></li> <li><a href="/c/02164542O2022.html" title="运用flutter|运用flutter 构建一个发布版（release）APK" target="_blank">运用flutter|运用flutter 构建一个发布版（release）APK 
</a></li> <li><a href="/c/02164539542022.html" title="Vue组件之事件总线和消息发布订阅详解" target="_blank">Vue组件之事件总线和消息发布订阅详解 
</a></li> <li><a href="/c/02164536022022.html" title="K8S|K8S 生态周报| Istio 即将发布重大安全更新，多个版本受影响" target="_blank">K8S|K8S 生态周报| Istio 即将发布重大安全更新，多个版本受影响 
</a></li> <li><a href="/c/02164534362022.html" title="Redis——发布订阅/消息队列" target="_blank">Redis——发布订阅/消息队列 
</a></li> <li><a href="/c/02154523Z2022.html" title="LOGO--完美世界Logo设计（三）" target="_blank">LOGO--完美世界Logo设计（三） 
</a></li> <li><a href="/c/02154522642022.html" title="这款充电最快的5G手机就要发布了，你对它还一无所知（）" target="_blank">这款充电最快的5G手机就要发布了，你对它还一无所知（） 
</a></li> <li><a href="/c/0215451TR022.html" title="解放全球宝妈，宝倍爽发布“纸尿裤3.0”开启母婴智能新生活" target="_blank">解放全球宝妈，宝倍爽发布“纸尿裤3.0”开启母婴智能新生活 
</a></li> </ul></p>
            <div class=entry-copyright>
              <p></p>
            </div>
          </div>
          <div class="entry-footer">
    <div class="prev-next sb br mb clearfix">
      <p class="post-prev fl ellipsis">上一篇：<a href='/c/10092O25H021.html'>在地图上创建热力图的方法</a> </p>
      <p class="post-next fr ellipsis">下一篇：<a href='/c/10092O2612021.html'>阿里蚂蚁集团-前端秋招一面面经</a> </p>
    </div>

          </div>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="widget widget_post_thumb">
        <h3 class="widget-title"><span>更多...</span></h3>
        <ul>
          <li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/091119544H021.html" title="春芽"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="春芽" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/091119544H021.html" title="春芽">春芽</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/0Z61613252021.html" title="海的约会第七天、第八天"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="海的约会第七天、第八天" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/0Z61613252021.html" title="海的约会第七天、第八天">海的约会第七天、第八天</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/0S1114M12021.html" title="自动化测试"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="自动化测试" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/0S1114M12021.html" title="自动化测试">自动化测试</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/09152139242021.html" title="一分钟英语趣问答|一分钟英语趣问答 14"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="一分钟英语趣问答|一分钟英语趣问答 14" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/09152139242021.html" title="一分钟英语趣问答|一分钟英语趣问答 14">一分钟英语趣问答|一分钟英语趣问答 14</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/01013c3312022.html" title="读书沙龙好书推荐"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="读书沙龙好书推荐" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/01013c3312022.html" title="读书沙龙好书推荐">读书沙龙好书推荐</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/010T1KU2022.html" title="Activity的四种启动模式及其分析"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="Activity的四种启动模式及其分析" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/010T1KU2022.html" title="Activity的四种启动模式及其分析">Activity的四种启动模式及其分析</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/10022644542021.html" title="我在深夜里笑"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="我在深夜里笑" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/10022644542021.html" title="我在深夜里笑">我在深夜里笑</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/0925244V32021.html" title="罗大伦《道德经》225"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="罗大伦《道德经》225" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/0925244V32021.html" title="罗大伦《道德经》225">罗大伦《道德经》225</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/121SER92021.html" title="雷微静（回得了过去，回不了当初）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="雷微静（回得了过去，回不了当初）" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/121SER92021.html" title="雷微静（回得了过去，回不了当初）">雷微静（回得了过去，回不了当初）</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/09222329E2021.html" title="记一次线上内存泄漏问题的排查过程"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="记一次线上内存泄漏问题的排查过程" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/09222329E2021.html" title="记一次线上内存泄漏问题的排查过程">记一次线上内存泄漏问题的排查过程</a></p>
            </div>
          </li>

        </ul>
      </div>
	
	
    </aside>
  </div>
</div>
<footer class="footer">
  <div class="container">
    <div class="clearfix">
      <div class="footer-col footer-col-logo"> <!--<img src="/skin/images/logo-footer.png">--></div>
      <div class="footer-col footer-col-copy">
        <ul class="footer-nav hidden-xs">
          <li class="menu-item menu-item-706"><a href="/baike/">生活百科</a></li>
          
          <li class="menu-item menu-item-706"><a href="/it/">it技术</a></li>
		  
        </ul>
        <div class="copyright">
          <p>Copyright © 2017-2022 锐客网 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备11041112号-41</a> </p>
        </div>
      </div>
      <div class="footer-col footer-col-sns">
        <div class="footer-sns"> </div>
      </div>
    </div>
  </div>
</footer>
<div class="action action-style-0 action-color-0 action-pos-1" style="bottom:15%;">
  <div class="action-item gotop j-top"> <i class="web-icon wi action-item-icon"><svg aria-hidden="true">
    <use xlink:href="#wi-arrow-up-2"></use>
    </svg></i></div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?79e4e485d34c6fc717489eaa10b314e3";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<script>var _web_js={};</script> 
<script src="/skin/js/index.js"></script>
</body>
</html>