Bootstrap - 跟着李南江学编程

最新推荐文章于 2020-11-27 14:04:47 发布

子.星语

最新推荐文章于 2020-11-27 14:04:47 发布

阅读量473

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/ljh1972/article/details/106234913

版权

浏览器和设备
了解Bootstrap支持的浏览器和设备（从现代到旧），包括每个浏览器和设备的已知问题和错误。

支持的浏览器
Bootstrap支持所有主要浏览器和平台的最新，稳定版本。在Windows上，我们支持Internet Explorer 10-11 / Microsoft Edge。

不明确支持直接或通过平台的Web视图API使用最新版本的WebKit，Blink或Gecko的替代浏览器。但是，Bootstrap也应该（在大多数情况下）在这些浏览器中也能正常显示和运行。下面提供了更具体的支持信息。

你可以找到我们支持的浏览器及其版本的范围在我们.browserslistrc file：

复制

https://github.com/browserslist/browserslist#readme

= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
我们使用Autoprefixer通过CSS前缀处理预期的浏览器支持，而CSS前缀使用Browserslist来管理这些浏览器版本。请查阅他们的文档，以了解如何将这些工具集成到您的项目中。

移动设备
一般来说，Bootstrap支持每个主要平台的默认浏览器的最新版本。请注意，不支持代理浏览器（例如Opera Mini，Opera Mobile的Turbo模式，UC迷你浏览器，Amazon Silk）。

铬火狐浏览器苹果浏览器 Android浏览器和WebView 微软边缘
安卓系统支持的支持的不适用支持Android v5.0 + 支持的
的iOS 支持的支持的支持的不适用支持的
Windows 10移动版不适用不适用不适用不适用支持的
桌面浏览器
同样，支持大多数桌面浏览器的最新版本。

铬火狐浏览器 IE浏览器微软边缘歌剧苹果浏览器
苹果电脑支持的支持的不适用不适用支持的支持的
视窗支持的支持的支持，IE10 + 支持的支持的不支持
对于Firefox，除了最新的正常稳定版本外，我们还支持Firefox 的最新扩展支持版本（ESR）版本。

非正式地，Bootstrap在Chromium和Chrome for Linux，Firefox for Linux和Internet Explorer 9中应具有良好的外观和良好的性能，尽管它们不受官方支持。

有关Bootstrap必须解决的一些浏览器错误的列表，请参见《浏览器错误墙》。

IE浏览器
支持Internet Explorer 10+；IE9和向下不是。请注意，IE10并不完全支持某些CSS3属性和HTML5元素，或者要求使用前缀属性才能具有全部功能。请访问“我可以使用…”以获取有关浏览器对CSS3和HTML5功能的支持的详细信息。如果需要IE8-9支持，请使用Bootstrap 3。

手机上的模式和下拉菜单
溢出和滚动
overflow: hidden;对元素的支持在iOS和Android中非常有限。为此，当您在任一设备的浏览器中滚动经过某个模式的顶部或底部时，内容将开始滚动。请参阅Chrome错误＃175502（已在Chrome v40中修复）和WebKit错误＃153852。

iOS文本字段和滚动
从iOS 9.2开始，在打开模态时，如果滚动手势的初始触摸在text 或a 的边界内，则模态下的内容将滚动而不是模态本身。请参阅WebKit错误＃153856。

导航栏下拉菜单
.dropdown-backdrop由于z索引的复杂性，该元素未在iOS中的导航中使用。因此，要关闭导航栏中的下拉菜单，必须直接单击dropdown元素（或在iOS中触发click事件的任何其他元素）。

浏览器缩放
页面缩放不可避免地会在Bootstrap和Web的其余部分中的某些组件中呈现渲染工件。根据问题，我们也许可以解决它（先搜索，然后根据需要打开一个问题）。但是，我们往往会忽略它们，因为它们通常只有骇人的解决方法而没有其他直接的解决方案。

粘性:hover/ :focus在iOS上
尽管:hover在大多数触摸设备上无法实现，但iOS模仿了此行为，导致“粘滞”悬停样式在点击一个元素后仍然存在。仅当用户点击另一个元素时，才会删除这些悬停样式。这种行为在很大程度上被认为是不希望的，并且在Android或Windows设备上似乎不是问题。

在整个v4 alpha和beta版本中，我们包括不完整和注释掉的代码，用于选择媒体查询填充程序，它将在模拟悬停的触摸设备浏览器中禁用悬停样式。这项工作从未完全完成或启用，但是为了避免完全损坏，我们选择弃用此填充程序，并将mixins保留为伪类的快捷方式。

列印
即使在某些现代浏览器中，打印也可能很古怪。

从Safari v8.0开始，使用固定宽度.container类可能导致Safari在打印时使用非常小的字体大小。有关更多详细信息，请参见问题＃14868和WebKit错误＃138192。以下CSS是一种可能的解决方法：

@media print {
  .container {
    width: auto;
  }
}

Android股票浏览器
开箱即用，Android 4.1（甚至显然还有一些较新的版本）随附于Browser应用程序作为默认的默认Web浏览器（与Chrome相对）。不幸的是，浏览器应用程序通常存在许多bug和与CSS的不一致之处。

选择菜单
在元素上，如果存在border-radius和/或已border应用，则Android stock浏览器将不会显示侧面控件。（有关详细信息，请参见StackOverflow问题。）使用下面的代码片段删除有问题的CSS，并将其呈现为Android股票浏览器中的未样式元素。用户代理嗅探可避免干扰Chrome，Safari和Mozilla浏览器。

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

的JavaScript
借助我们基于jQuery构建的可选JavaScript插件，使Bootstrap栩栩如生。了解每个插件，我们的数据和程序化API选项以及更多信息。

个人或汇编
插件可以单独包含（使用Bootstrap的personal js/dist/*.js），也可以同时使用bootstrap.js或缩小的插件bootstrap.min.js（不包括两者）全部包含在内。

如果使用捆绑程序（Webpack，汇总…），则可以使用/js/dist/*.jsUMD就绪的文件。

依存关系
一些插件和CSS组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖性。还要注意，所有插件都依赖jQuery（这意味着jQuery必须在插件文件之前包含jQuery ）。请咨询我们，package.json以了解支持哪些版本的jQuery。

我们的下拉菜单，弹出窗口和工具提示也取决于Popper.js。

资料属性
几乎所有的Bootstrap插件都可以通过带有数据属性的HTML单独启用和配置（我们使用JavaScript功能的首选方式）。确保仅在单个元素上使用一组数据属性（例如，您无法从同一按钮触发工具提示和模式。）

但是，在某些情况下，可能需要禁用此功能。要禁用数据属性API，请取消绑定文档命名空间上的所有事件，data-api如下所示：

复制
$(document).off(’.data-api’)
另外，要定位特定的插件，只需将插件的名称作为名称空间以及data-api命名空间包括在内，如下所示：

复制
$(document).off(’.alert.data-api’)
选择器
当前querySelector，querySelectorAll由于性能原因，我们使用本机方法来查询DOM元素，因此您必须使用有效的选择器。例如，如果您使用特殊的选择器，请collapse:Example确保对它们进行转义。

大事记
Bootstrap为大多数插件的唯一操作提供自定义事件。通常，它们以不定式和过去分词形式出现-在show事件开始时触发不定式（例如），并且shown在动作完成时触发其过去分词形式（例如）。

所有不定式事件均提供preventDefault()功能。这提供了在动作开始之前停止执行的能力。从事件处理程序返回false也会自动调用preventDefault()。

复制
$(’#myModal’).on(‘show.bs.modal’, function (e) {
if (!data) {
return e.preventDefault() // stops modal from being shown
}
})
程序化API
我们还相信您应该能够完全通过JavaScript API使用所有Bootstrap插件。所有公共API都是单个可链接的方法，并返回所作用的集合。

复制
$(’.btn.danger’).button(‘toggle’).addClass(‘fat’)
所有方法都应接受可选的options对象，以特定方法为目标的字符串或不包含任何内容（以默认行为启动插件）：

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

每个插件还向Constructor属性公开其原始构造函数： $. f n . p o p o v e r . C o n s t r u c t o r 。如果您想获取特定的插件实例，请直接从元素中检索它：$ (’[rel=“popover”]’).data(‘popover’)。

异步功能和转换
所有编程API方法都是异步的，并且在过渡开始之后但结束之前会返回给调用方。

为了在转换完成后执行操作，您可以监听相应的事件。

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

另外，将忽略对过渡组件的方法调用。

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the trans

ition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

默认设置
您可以通过修改插件的Constructor.Default对象来更改插件的默认设置：

/ changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

没有冲突
有时有必要将Bootstrap插件与其他UI框架一起使用。在这些情况下，名称空间冲突有时会发生。如果发生这种情况，您可以调用.noConflict要还原其值的插件。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

版本号
每个Bootstrap jQuery插件的版本都可以通过VERSION该插件的构造函数的属性进行访问。例如，对于工具提示插件：

复制
$.fn.tooltip.Constructor.VERSION // => “4.4.1”
禁用JavaScript时没有特殊的后备
禁用JavaScript时，Bootstrap的插件不会特别优雅地回退。如果您在这种情况下关心用户体验，请使用来向用户解释这种情况（以及如何重新启用JavaScript），和/或添加您自己的自定义后备广告。

第三方图书馆
Bootstrap不正式支持 Prototype或jQuery UI等第三方JavaScript库。尽管.noConflict有事件和命名空间事件，但可能仍需要自己解决兼容性问题。

有用
所有Bootstrap的JavaScript文件都依赖于util.js它，并且必须与其他JavaScript文件一起包含在其中。如果您使用的是已编译的（或压缩的）bootstrap.js，则无需包含它-它已经存在。

util.js包括实用程序功能和transitionEnd事件的基本帮助器，以及CSS过渡模拟器。其他插件使用它来检查CSS过渡支持并捕获挂起的过渡。

消毒液
工具提示和弹出窗口使用我们内置的清理工具来清理接受HTML的选项。

默认whiteList值如下：

我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com

子.星语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap - 跟着李南江学编程

浏览器和设备了解Bootstrap支持的浏览器和设备（从现代到旧），包括每个浏览器和设备的已知问题和错误。支持的浏览器Bootstrap支持所有主要浏览器和平台的最新，稳定版本。在Windows上，我们支持Internet Explorer 10-11 / Microsoft Edge。不明确支持直接或通过平台的Web视图API使用最新版本的WebKit，Blink或Gecko的替代浏览器。但是，Bootstrap也应该（在大多数情况下）在这些浏览器中也能正常显示和运行。下面提供了更具体的支持信息。
复制链接

扫一扫