开始进行引导测试-DEV365 开发者社区

一小群开发人员和我聚集在一起设计和构建一个新的内部工具，并看到了一个做更多事情的机会。通过该过程，我们看到自己比另一个内部工具建立了更实质性的东西。几个月后，我们最终获得了Bootstrap的早期版本，以记录并在公司内共享常见的设计模式和资产。

建立了Twitter之类的网站时，许多团队在其专家领域做出了贡献，因此一切都完美无缺。但是，一个团队的代码可能会阻碍另一个团队的代码，或者一个团队的标准可能与另一个团队不同，这可能会造成不一致的情况，从而增加维护时间。这就是Mark和Jacob所面临的问题，他们想要一个解决方案，可以快速解决这些问题而无需遵循大量协议。因此，Bootstrap是Web开发的标准规则。

它的成立使其成为Web开发的组成部分，也是Web开发人员学习的强制性框架。本bootstrap testing指南将帮助您提高技能，并更加有效地开发和测试网站。

什么是bootstrap？

Bootstrap是best CSS frameworks中免费的开源CSS框架，它通过向开发人员提供丰富的库来帮助创建mobile-first和responsive website。该库包含开发人员可以直接使用的预定义JavaScript和CSS功能。任何代码开发人员根据引导程序规则都会自动响应。因此，您不必付出更多的努力才能实现同样的事情。

Bootstrap易于学习和免费使用，即其代码可在GitHub上获得，该代码截至2022年12月，该图书馆是第四位最受欢迎的图书馆和第14个最受欢迎的项目。

。

Bootstrap包含什么？

Bootstrap在其库中包含许多预定义的CSS，SCS和JavaScript函数。作为开发人员，我们只需要扩展它们即可更改或无需采取任何行动即可使用类别（或有时直接没有类别的类别，例如那些在身体或根上起作用的规则）。

）。

让S在HTML中编写一小部分代码，该代码使用Bootstrap类，如下：

在此 System testing 教程中，了解系统测试为何重要以及系统测试过程的所有复杂性。

<em><center> <br><br> <p class="text-success"> This is to see Bootstrap class </p> <br> </center></em>

我们在这里使用文本 - 成功类，并且没有其他CSS应用。该代码的输出如下：

请注意，文本已经变成绿色而无需使用任何颜色。可以通过右键单击页面并选择选项检查：
来检查它的方法：

我们可以看到，文本 - 成功类负责应用modern CSS colors，而十六进制中的颜色代码为＃3C763D。在右边，我们将文本视为文本强调。 Bootstrap文件：

单击文本以获取课堂的完整代码：

相反，我们可以在其官方GitHub页面上探索完整的库。在这些文件中，您将获得不同的变量，这些变量被确定在网页上应用。
。

上面的许多变量使用CSS variables初始化。另外，请记住，与继承相同的类，相同的效果可能并不总是实际的，并且当我们在网页上实现各种元素时，优先级就可以使用权力。
。
bootstrap之前的生活

在此简短部分中，让我通过用常规代码替换引导代码来强调引导程序的重要性。换句话说，我们如何在Bootstrap诞生之前实现结果！

我们将在此演示中为网站做一个小登录表格。

是一个全面的用户接受测试（UAT）教程，涵盖用户 Acceptance Testing IS，其重要性，好处以及如何与实时示例

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>The contain style property</title> <style> * { box-sizing: border-box; } body { font-size: 15px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.42857143; } label { display: inline-block; max-width: 70%; margin-bottom: 5px; font-weight: 700; } .muted-text { color: #777; font-size: 13px; } .box-class { padding-right: 275px; padding-left: 275px; margin-right: auto; margin-left: auto; } .inputblock { margin-bottom: 15px; } input { width: 100%; height: 40px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } input[type="checkbox"] { margin: 4px 0 0; margin-top: 1px\9; width: 1.5%; line-height: normal; box-sizing: border-box; padding: 0; font-family: inherit; font-size: inherit; vertical-align: middle; } button { color: #fff; background-color: #337ab7; border-color: #2e6da4; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; background-image: none; border: 1px solid transparent; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; font: inherit; } </style> </head> <meta name="viewport" content="width=device-width, initial-scale=1"> <body> <center> <br><br> <div class = "box-class"> <form> <div class = "inputblock"> <label for="email">Email:</label><br> <input type="email" class="" id="email" placeholder="Enter Your Email Address"> <small id="emailcation" class="muted-text">We'll never share your email with anyone else.</small> </div> <div class = "inputblock"> <label for="password">Password</label><br> <input type="password" class="form-control" id="password" placeholder="Enter Password"> </div> <div class = "inputcheck"> <input type="checkbox" id="tnccheckbox"> <label for= "tnccheckbox">I agree to terms.</label> </div> <button type="submit">Submit</button> </form> </div> </center> </body> </html>

输出：

现在，让我们更改代码，看看如何使用Bootstrap：
可以实现同一页面

<body> <center> <br><br> <div class="container"> <form> <div class="form-group"> <label for="emaillabel">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter Your Email Address"> <small id="emailcation" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="passwordlabel">Password</label> <input type="password" class="form-control" id="password" placeholder="Enter Password"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="tnccheckbox"> <label class="form-check-label" for="tnclabel">I agree to terms.</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </center> </body>

输出：

只需一分钟即可观察两个代码之间的差异。您会注意到在Bootstrap中编写代码是多么简单。通常，在构建页面时，跟踪受影响的CSS属性也很难。更多的属性意味着元素之间更多的碰撞。 Bootstrap还解决了这一点。因此，执行引导测试至关重要，这在上面的示例中可见。

我们为什么要使用bootstrap？

帖子中提到的上述优点是最具吸引力的优势，可以鼓励您在下一个项目中采用自举。但这并没有以移动优先的设计和响应能力结束。采用该框架还有更多的好处，值得考虑。

更快的代码写作'降低了通过预定的类和功能编写代码的时间。

移动优先设计'''效果首先要工作，因此开发人员不必担心移动设备。

可自定义的 “ bootstrap代码都没有被迫。开发人员可以在任何元素上修改任何类和任何代码。这可以通过明确的CSS样式或JavaScript功能来完成。
标准化和接受的规则 - 它在全球范围内被接受为标准的CSS库，用于自定义网页，以帮助与来自不同位置的其他社区成员合作。
易于集成非常容易通过在网页上添加一行代码来集成。
开放源代码 - 开源的另一个优点是，当您卡住li>
丰富的文档 对于希望开始进行引导的人，可以提供大量丰富的文档（包括官方文件）。

测试您的 Puppeteer testing 在线脚本。通过使用Lambdatest Cloud进行超过3000多个浏览器和操作系统组合，通过运行自动检查来更快地部署质量构建。免费尝试。

Bootstrap库的内容

本节适用于希望研究图书馆中包含的目录结构和文件的开发人员。请注意，目录结构的知识不是必须实现引导程序并使用它创建网页的知识。

Bootstrap的源代码如下：

bootstrap/
├── dist/
│   ├── css/
│   └── JavaScript/
├── site/
│   └──content/
│      └── docs/
│          └── 5.3/
│              └── examples/
├── JavaScript/
└── scss/

目录结构具有以下文件夹：

dist

dist - 文件夹包含直接在项目中使用的编译文件。编译的文件看起来像这样（内部CSS/）：

bootstrap-grid.css

bootstrap.css

bootstrap.rtl.min.css

和JavaScript侧（内部JavaScript/）：

bootstrap.bundle.javascript

bootstrap.javascript

注意：这些文件名只是为了使您熟悉Dist文件夹的内容。此文件夹中还有更多具有类似命名法的文件。

site

此文件夹包含带有文档的子文件夹，可帮助您为网页编写代码。

javascript

JavaScript文件夹包含有关JavaScript文件的源代码。

scss

SCSS文件夹包含CSS文件的源代码。

此博客可以使用Bootstrap测试的所有内容以及您想做的任何事情。

如何在网页上使用bootstrap？

要在我们的网页中使用bootstrap，我们需要完全或仅拿起上述源代码或仅仅是所需的文件，以便它们可以扩展到Web元素。

这可以通过三种方式实现：

从官方网站手动下载bootstrap。
使用软件包管理器下载bootstrap。
使用CDN。

从官方网站下载

要从其官方网站下载Bootstrap，请访问下载页面。在这里，我们有两个选项要么仅下载可以直接在项目上使用的编译文件，也可以下载源代码。您可以选择以任何一种方式继续前进。虽然，建议使用编译文件来减少项目的大小。

从github下载

Bootstrap是一个开源和免费项目，可以在其官方存储库托管网站Github上贡献。开发人员可以从其官方链接直接从GitHub下载，分叉或克隆存储库。由于我们专注于下载，因此请单击“代码”和“下载Zip”将代码下载到本地系统。

在此 XCUITest 教程中，了解Xcuitest框架及其对移动自动化测试的好处。看看Xcuitest的工作原理，看看如何使用它来测试您的移动应用程序。

在您的项目存储库中提取此ZIP以在网页上使用它。但是，当从GitHub下载Bootstrap时，它将下载源并编译文件（以及其他所有内容）。您需要根据需要删除一些文件。

使用软件包管理器

我们与我们一起使用的下一个选项是使用软件包管理器并通过在Shell上运行单个简单命令来下载Bootstrap。根据选择，不同的开发人员更喜欢不同的软件包经理。我们将考虑其中的一些让您入门。

使用NPM软件包管理器，

运行以下命令使用NPM下载Bootstrap：

npm install bootstrap

下载完成后，您需要提供要求（bootstrapâ）加载jQuery对象。

使用RubyGems软件包管理器，

运行以下命令使用RubyGems下载Bootstrap：

gem install bootstrap -v 4.0.0

如果您使用的是Bundler，请将以下内容添加到您的gemfile：

gem 'bootstrap', '~> 4.0.0'

在这两种方法中，Bootstrap的官方文档推荐了第二种方法。

使用作曲家软件包管理器，

运行以下命令使用作曲家下载引导程序：

composer require twbs/bootstrap:4.0.0

使用Nuget软件包管理器，

运行以下命令使用Nuget下载Bootstrap：

Install-Package bootstrap

如果开发人员使用软件包管理器选择下载选项，则他们需要让SASS编译器和AutoPrefixer成功运行Bootstrap。它应该匹配引导设置；否则，下载的源文件不能扩展到网络元素。

使用CDN

作为开发人员，我认为使用bootstrap的最推荐方法是通过CDN。

CDN是指可以根据最接近服务器的需要将数据获取给客户端的内容交付（或分发）网络。它很快（虽然不如下载文件快），有关项目大小，至关重要且易于使用的灯。

要使用CDN使用bootstrap，我们需要做的就是在网页的标签中添加这两行：

<link href="https://cdn.JavaScriptdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.JavaScriptdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/JavaScript/bootstrap.bundle.min.JavaScript" integrity="sha384-w76AqPfDkMBDXo30JavaScript1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

这将包括CSS和JavaScript文件，这些文件现在可以直接与Web Elements一起使用。

哪种方式可以选择下载引导程序？

有很多选择的方法，选择一种方法并在引导程序上工作可能会令人困惑，并且需要澄清。因此，是否有一些参数可以判断哪种方式适合您？

首先，下载引导意味着增加项目规模，因为所有文件现在都将在项目目录下定居。这意味着您的服务器将加载更多内容，其影响可以在加载速度和服务器租金的费用中看到。

其次，Bootstrap的更新意味着下载和重写所有文件。由于它是开源的，因此可能会定期定期更新，这可能会增加维护开销。

在本地系统上下载Bootstrap只有两个原因。一个重要的优势是它可以离线使用，如果没有常规的互联网并且您目前正在开发或测试，那就太好了。组织还下载Bootstrap并将其保存在其服务器/数据中心中，从其内部项目选择它。

其次，如果您下载Bootstrap（也将下载源文件），则可以根据项目中遵循的标准对其进行修改。然后，它们可以保存在服务器上，人们通常可以直接使用Bootstrap功能，并且更改将在网页上反映。

如果您不属于这些类别，则使用Bootstrap的最佳方法是使用CDN，它是快速的，有助于优化SEO。它还将占用较小的空间，这将有助于提高加载速度并利用较小的带宽。

如何使用Bootstrap创建网页？

现在我们知道了引导程序的内容和用法，我们可以剖析上面的登录页面，以了解如何使用Bootstrap创建网页。

要使用bootstrap，首先，我们需要bootstrap。在此演示中，我在Head标签中使用CDN：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The contain style property</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.JavaScript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/JavaScript/bootstrap.min.JavaScript"></script>
  </head>

接下来，作为一般规则，我们使用容器类，该类别可帮助我们获得良好的填充和包含网页的框结构：

< div class="container" >

现在我们需要创建表单。为此，我们将每个元素视为单独的DIV，以便我们可以更灵活地控制它们中的每个元素，并将其元素分组为使一个单位形式。 Bootstrap s form-group类是为此目的：

< div class="form-group" >

在此div内，我们需要两个代表字段和字段本身名称的标签。该标签可用于直接在HTML中使用的标签。我们将表单控制类用于输入字段和Bootstrap类，用于文本字段，例如输入，TextAarea和Select。

。

< input type="email" class="form-control" id="email" placeholder="Enter Your Email Address" >

它可以根据需要自定义这些元素。

我们也可以重复相同的结构。

之后，我们需要一个以条款和条件的复选框。对于通过复选框和无线电按钮获取的此类输入，Bootstrap使用表单检查类。该课程具有其他类似的类，并根据标签使用小型修改。例如，form-check-Input'使用用于输入标签和标签元素，form-check-label。小元素通常不在网页上。

< input type="checkbox" class="form-check-input" id="tnccheckbox" > < label class="form-check-label" for="tnclabel">I agree to terms.

最后，我们需要一个可以使用btn-lgâ，btn-md等的btn类来修改的按钮，以适用于尺寸和btn-successâ， •按钮，＆for自定义。

您可以通过复制一个.html文件并自定义自己的最终网页是：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The contain style property</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.JavaScript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/JavaScript/bootstrap.min.JavaScript"></script>
  </head>
<body>
  <center>
    <br><br>
  <div class="container">
    <form>
  <div class="form-group">
    <label for="emaillabel">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter Your Email Address">
    <small id="emailcation" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="passwordlabel">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Enter Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="tnccheckbox">
    <label class="form-check-label" for="tnclabel">I agree to terms.</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
  </center>
</body>
</html>

开始使用此完整的 Selenium guide 进行自动测试。了解什么是硒，其体系结构，优势以及更多用于自动跨浏览器测试的方法。阅读更多。

好吧！现在，我们已经使用Bootstrap开发了页面。该引导程序测试教程的下一步是对其进行对异常和错误进行测试。在此之前，让我们知道为什么引导测试很重要。

为什么引导程序测试必不可少？

从引入Bootstrap到现在为止，我们一直关注框架的两个重要属性。这意味着开发人员可以做一些事情，而不是做其他工作以使网页响应或适合移动设备完美。在这种情况下，为什么要讨论引导测试？

较少的覆盖范围

Bootstrap的官方网站指出，Bootstrap支持所有主要浏览器和平台的最新稳定版本。但是，当我们考虑仅针对Google Chrome的最新浏览器使用情况时，我们就会发现只有一点超过11％的人使用该版本。

当我们看到总体Google Chrome使用情况时，几乎是39％

这意味着我们冒着27％的Google Chrome用户的风险，这只是一个浏览器的故事。

不支持Internet Explorer。

另一个要点是，Bootstrap在Internet Explorer浏览器上没有响应。如果您的目标矩阵包含Internet Explorer，那么不测试网页将意味着忽略仍有28年历史的浏览器的2800万人。开发人员或组织都不应在这条道路上移动。

不支持备用浏览器。

Bootstrap清楚地指出，它支持所有主要浏览器，但没有提及browser engines。考虑到浏览器引擎是开源的，并用于开发和发布备用浏览器，因此不保证支持Bootstrap网页。这些浏览器可能非常受欢迎，并且经常成为本地系统中的次要浏览器。

最好的例子是勇敢的浏览器，该浏览器不在Bootstrap的支持浏览器列表中。截至2022年8月，浏览器拥有超过500百万个活跃的每月活跃用户。在过去的几年中，它仅增加了。同样，最终用户可能正在使用的其他浏览器或壁虎引擎开发了其他浏览器，并且可能面临一些挑战。

图像/屏幕截图响应

图像的响应能力是发布网站时查看列表的关键点之一。作为开发人员，我们在自举和图像上面临许多困难。

可以使用Lambdatest LT Browser实现此目标。考虑下面显示的网页，如果我在景观中添加一个小图像，则输出将如下以下：

：

它看起来很适合在台式机上，但受试者可能会失去对移动设备的关注。启动响应能力的概念只有在视图上重新恢复要素之前才是好的。为了实现实际响应能力，我们需要responsive testing。

lt浏览器提供了各种视口，您可以像本地浏览器一样输入URL。您可以一次选择多个设备，并在短短几秒钟内查看Web应用程序。

您还可以使用浏览器随附的功能，例如网络节流，捕获屏幕截图，录制视频等。下载我们的LT Brower 2.0并检查Web应用程序的响应能力。

如果您想更多地了解图像响应能力，其相关元素以及处理它的不同方法。在这种情况下，我们在how to make responsive images上有一个专门的帖子，带有CSS，HTML，WordPress和More。

观看我们的视频，以学习如何在lambdatest平台上执行响应式自举测试。

订阅LambdaTest YouTube Channel，并随时更新有关test automation，mobile app testing，Selenium testing，Cypress，Cypress，剧作家等的最新教程。

让心放心

最后，当高级工具可以从各个角度指出Web应用程序中的各种错误和故障时，为什么不使用它们呢？通过给更多的时间并花费更多的钱，组织可以放心，无论用户正在运行什么，Web应用程序将永远是完美的。它还将有助于减少后期制作错误可能带来的维护时间和成本。

如何使用lambdatest执行引导测试？

lambdatest是一个在线cross-browser testing平台，为测试人员提供超过3000多个浏览器来测试其移动和Web应用程序。使用lambdatest的重要优势是消除维护多个浏览器和设备的高成本。作为回报，开发人员和测试人员可以使用与多种技术集成的强大基础架构，这在引导测试中很有帮助。

要在Lambdatest上测试您的Web或移动应用程序，您需要做的就是按照以下步骤进行操作：

免费注册或登录仪表板。
单击实时测试 - >从左图测试Web应用程序和应用程序测试以测试移动应用程序。

选择您希望测试应用程序的规格。

输入Web应用程序的URL，然后单击“开始”以启动。

您还可以使用Lambdatest隧道在Lambdatest云服务器上托管的安全壳测试环境中彻底测试您的开发。它使您可以安全地在3000多个浏览器及其各种版本上测试Web应用程序，以跨浏览器和跨平台兼容性运行，甚至在将其部署到过量生产环境之前。

。

在此屏幕上，您可以像本地浏览器上的应用程序进行交互。尝试调整大小并检查各种浏览器网站的响应能力。

另外，如果您唯一的目标是检查响应能力，那么Lambdatest提供了为此目的而开发的LT浏览器，如上一节所述。您也可以在different screen sizes and resolutions上使用网站的check the mobile view。无论是iPhone，iPad，Samsung还是MacBook，您都可以在LT浏览器中获得所有分辨率。

可以与JavaScript框架一起使用引导程序吗？

大多数Web应用程序将消耗HTML，CSS和JavaScript代码。最近在过去的十年中，由于JavaScript能够为应用程序提供功能和活力，各种best JavaScript frameworks在市场上弹出。其中包括React，Vue和Angular。通过今天查看这些框架的采用，我确信我们是否可以将Bootstrap与JavaScript Frameworks一起使用。

。

这个问题的答案是否；我们不能。 Bootstrap本身包含其在JavaScript文件中发货的JavaScript函数。使用其他JavaScript框架将影响完整的DOM，包括Bootstrap影响元素。由于这种碰撞，在最明显的应用程序中可能会在下拉列表等动态元素中出现错误。

。

作为bootstrap的预防性注释和建议，整个JavaScript库不应与诸如Vue和React之类的JavaScript框架一起使用。

如何将Bootstrap与JavaScript框架使用？

很多时候，Bootstrap和JavaScript Frameworks将一起使用来创建网页。在这种情况下，开发人员不应使用Bootstrap JavaScript，而应选择与这些技术兼容的特定于Bootstrap的框架。对于特定的框架，您可以在线找到一个软件包。

例如，对于React开发人员，可以使用React Bootstrap。对于VUE开发人员，可以使用BootstrapVue，同样，NG-Bootstrap适用于角开发人员。使用这些软件包作为替代方案将非常适合您的开发和发布项目。

引导和开发时要记住的事情

在结束有关自举测试的帖子之前，必须讨论一些要点，可以作为自举测试的最佳实践或警告性事物，或者您可以在列表中推迟的内容，以验证引导程序测试质量，然后再发布质量。向用户应用。

可访问性 - 自举测试的重要组成部分是执行accessibility testing。面对与Web应用程序互动的挑战的人，例如具有特殊能力的人等。W3已发布了应遵循的指南，应在开发或引导可访问性测试时遵循这些指南。 Bootstrap提供了一个可访问的网站，但是由于我们使用多种技术，因此可访问性测试是应在列表中检查的关键功能之一。

观看有关如何使用柏树进行可访问性测试的视频。

在线测试您的网站或Web应用程序iOS浏览器兼容性。在最新的 iPhone tester 模拟器上执行无缝的交叉浏览器测试。免费尝试。

溢出：隐藏 - 当内容在元素框外溢出时，激活了溢出属性。在此属性中传递的值决定了遇到这种情况时要采取的措施。借助Bootstrap应用程序，Overflow：隐藏在iOS和Android上似乎无法很好地工作。如果该属性在代码中存在，则应优先进行测试，并应应用解决方法。
在iOS上徘徊'许多网站为台式机提供了悬停的效果，其中元素可能会徘徊，而动作与此效果相关。例如，悬停以在这样的维基百科上弹出弹出窗口：

由于移动设备没有鼠标连接，因此在仅附有鼠标方面工作，因此在安装在其上的浏览器中不可能盘旋。但是，iOS试图为用户效仿这种行为并创建悬停效果。 Bootstrap网站在处理此问题方面面临着挑战。正如Bootstrap所说的那样，这种行为会导致粘贴悬停样式在点击一个元素后持续存在。要删除它们，用户必须点击另一个元素。如果您的应用程序具有悬停效果，则应在iOS浏览器中打开时提供验证。

查看我们关于CSS hover effects的综合指南，以了解有关悬停效果的更多信息。

Safari打印问题对于在网站上工作的开发人员和测试人员可能涉及打印网页（例如票务预订系统），Bootstrap的容器类（已使用）在上面的示例中）可能会破坏Safari浏览器。因此，网页的字体尺寸可能会变得非常小，有时会沿边界留出很大的空间。为您的网页启动Bootstrap测试，如果存在此问题，那么解决方法将是将宽度设置为自动打印时，以便Safari可以从那里捡起它。

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

上面的代码使用媒体查询，这是解决此类问题并根据需要为不同尺寸设备创建解决方法的最佳方法之一。如果您想进一步探讨这一点，请浏览我们的媒体查询深入博客文章以了解更多信息。

处理Android Stock浏览器 ``Android操作系统启用了移动设备（全部直到4.1，又有一些较新的发行版）带有默认浏览器，并带有许多与CSS相关的错误。如果用户使用它，则基于引导程序的网站可以轻松地使用简单的元素（例如侧控件）中断。尽管很难通过解决方法来修复它们，但是由于许多解决方法取决于屏幕尺寸或操作系统，我们应该始终检查是否可以解决简单的元素以使浏览体验变得方便。

包起来！

Bootstrap是当今Web开发的组成部分。更有可能的是，术语HTML，CSS，JavaScript和Bootstrap今天都在一起。组织还将CSS和Bootstrap用作一个术语，如果候选人在简历中写了CSS，他们通常会期望这一点。当一个框架融合到网络开发领域的深处时，讨论其复杂性，与其他框架混合以及您在旅途中可能面临的错误至关重要。

在这篇有关Bootstrap测试的文章中，我们试图用Bootstrap来启发读者，而不是理论上的主题，而是具有令人信服的实例的实用指南。从成立和与框架一起运送的内容开始，我们演示了初学者如何在Bootstrap中开发网页。一旦开发完成，需要使用Bootstrap测试对网页进行测试，并检查它是否像其他任何技术一样不完美。

为此，我们可以依靠基于云的平台lambdatest，这可以帮助我们发现3000多个浏览器和设备上的所有隐藏故障。最后，在执行自举测试时要牢记的最佳实践，我希望本教程有关引导程序测试的教程将在您的Web Dev Dev努力中为您提供良好的服务。感谢您为您提供此Bootstrap测试教程的宝贵时间。

快乐测试！

#lambdatestyourapps