Skip to content

Files

Latest commit

wizardforcelwizardforcel
2022-01-09 18:43:41
Jan 9, 2022
dc284d2 · Jan 9, 2022

History

History
160 lines (88 loc) · 9.66 KB

0.md

File metadata and controls

160 lines (88 loc) · 9.66 KB

零、简介

欢迎阅读简洁的系列的第二本书，该书涵盖了推特 Bootstrap 程序(BS)用户界面和 CSS 框架。

*在我的第一本书里，我奠定了最初的基础，让你开始使用 Bootstrap 2。

然而，自从那本书发行以来，Bootstrap 3 已经成为主流版本。

在本书中，我们将继续以此为基础，继续使用 BS v3。我们将看看不同之处，当我们探索新特性时，我们将看到 v2 中的大部分内容仍然适用于 v3。

如果你还没有读过关于 Bootstrap 2 的第一本书，那么我鼓励你这样做，因为我将在这本书的不同地方提到它。

这本书的风格和布局也将与第一本书略有不同，因为它将更多地是第一本书的延伸，而不是一本独立的书。

为什么呢？我相信，为了理解整个 Bootstrap 环境，您需要从头开始检查它。你需要能够理解它打算实现什么以及如何实现。

您将能够仅仅拿起这本书并学习 BS v3 的基础知识，但是如果您首先阅读 v2 的书，您将获得更深、更好的理解。

发生了什么变化

那么 v2 到 v3 有什么变化呢？

相当多。

两个版本之间的主要变化是 v3 现在是“移动优先”Bootstrap v2 是一个响应性布局 CSS 套件，但是它的移动和响应特性总是排在它丰富的 UI 特性之后。事实上，为了让响应性的东西正常工作，你必须包含第二个 CSS 文件，它的唯一目的是启用响应性的移动特性，而不是其他。

在 v3 中，整个情况已经完全逆转。整个框架现在是移动友好的，开箱即用，现在需要额外的工作来调整您的布局以适应更大的屏幕格式。不要误解我的意思，这绝不是一项繁重的工作。你需要改变的大部分仍然只是简单地交换类和正确地组织你的 HTML 标记。

另一个主要变化是类和 API 调用的命名。v2 中引入的许多类名现在要么已被弃用，要么已被重命名为更适合其预期目的的名称。

还有一个主要的努力是重命名类，使其更加一致。例如，在 v2 中，对于以红色错误颜色为目标的项目，我们有以下类:

  • 按钮- btn-danger
  • 正文- text-error
  • 表格行- tr.error
  • 标签- .important
  • 徽章- .important
  • 警报- .error
  • 进度条- progress-danger

现在，在 v3 中，这些已经被整合，这样所有组件的命名都是相似的，如下所示:

  • 按钮- btn-danger
  • 正文- text-danger
  • 表格行- .danger
  • 标签、徽章、警报- .danger
  • 进度条- progress-bar-danger

正如您所看到的，一致性现在是 v3 类中的一个主要角色，并且在整个框架中进行了许多其他类似的更改。

也有不少小变化。例如，Bootstrap 使用的盒子模型现在已经有了很大的改进，所有元素现在都使用border-box作为默认的 CSS 盒子大小模型。

网格系统也得到了扩展和改进，它不再是一个带有可选类的单一网格系统，而是由四层网格组成，专门针对手机、平板电脑、台式机和大型台式机。

所有的 JavaScript 内容现在也有了名称空间，以减少与其他 JavaScript 代码的冲突；现有的事件现在命名得更好，以反映它们的目的，并且记录得更清楚。

Modals和Navbars在响应性方面有了很大的改进，随着类命名的改变，所有组件的规模类(Inc Nav Modals)现在已经调整好了。

组件方面，一些较旧的、不太常用的组件已经被弃用和移除，其中最值得注意的是Accordion组件。但是不要绝望——手风琴已经被一个全新的collapsible-panel部件所取代，这个部件比它的前身更加灵活。

我们还有新的、狭窄的jumbotron、新的panel类型、列表组等等。

最后，每个人都会注意到的一个变化是外观和感觉: TWB V3 是扁平的。它有一个单一的颜色，新的界面，但圆角平坦。

悬停类中不再有好的渐变效果，进度条和按钮不再像 v2 中那样看起来是半 3D 的。相反，Twitter Bootstrap 的维护者决定做的是让定制 CSS 中元素的外观和感觉变得更容易。

维护人员甚至提供了一个“Bootstrap”主题，让 v3 看起来像最初的 v2 设计，让您开始使用。在本书的最后一章中，我将向您展示现在覆盖各种类是多么简单，并向您展示如何彻底改变平面主题以呈现您自己的外观和感觉。

但是现在，如果您想要 v2 体验，您需要确保您也根据需要包含适当的 CSS 文件。如果你想保持 v3 的默认值，你不需要任何额外的东西。

新的安装方法

当 BS2 第一次发布时，获得它的唯一方法是从项目网站下载。这在第一本书中有广泛的介绍，并深入讨论了哪些文件在 zip 文件中以及为什么。

因为很多人都在使用 Bootstrap，所以没过多久，它就被运行 MaxCDN 的人在 CDN 上免费提供了。这一传统一直延续到 v3 代码库中，现在您只需使用以下 HTML 脚本标记就可以获得您选择的标准 v3 安装:

          <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

          <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

          <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

如果您使用 CDN 版本，请记住，您还需要确保包含 JQuery 的最新副本；除非您这样做，否则 BS3 JS 的所有功能都不会起作用。

除了 CDN 链接之外，现在在 getbootstrap.com 网站上还有一个直接下载，不仅是上一本书中描述的标准 JavaScript & CSS 捆绑包，还有一个指向原始“Less”源的 zip 文件的直接链接，以及一个到“Sass”的转换，对于那些希望能够在自己的构建系统中包含一个完全基于变量的、可定制版本的工具包的人来说，可以使用 Grunt 这样的工具来实现自动化。

除了新的源代码之外，您现在还可以使用 Bower 从项目文件夹命令行安装您需要的所有内容:

bower 安装 Bootstrap

Bower 是一个 HTML 脚手架和软件包系统，旨在自动化大部分应用锅炉板。你不需要理解它就能理解 BS v3，但是在谷歌上快速搜索“Bower”会发现很多参考资料，加深你的理解。

同样，如果您在 Visual Studio 中工作，也可以使用 NuGet 包管理器安装 BS v3。像 Bower 一样，这将使安装和设置所需文件的过程自动化。不过要小心 NuGet 中有很多 Bootstrap 包，其中一些会让你付出比节省更多的努力。

最后，TWB 定制器在http://getbootstrap.com/customize/仍然可用。它经过了极大的重组和重建，提供了更多的选择，并更容易、更直观地了解您正在改变什么以及为什么改变。

事实上，现在使用定制器改变东西是如此容易，以至于您的设计师或设计团队可以在下载所需文件之前完成 90%的工作来设置下载的颜色和品牌。这使您的设计部门能够立即开始选择颜色和布局，同时处理页面布局和所需交互性的附加代码。然后，你只需要用你的设计者提供给你的文件替换你的默认文件，一个即时的主题改变就应该发生了。

设备支持

官方来说，BS v3 只支持最新一轮的 HTML 5 兼容浏览器和 Internet Explorer 10 及以上版本。

实际上，该框架还支持 IE8 和 IE9 然而，CSS3 和 HTML5 的一些特性并没有像预期的那样发挥作用。特别是，如果你想让响应元素正常工作，你需要使用respond.js，你可以从下面的 GitHub 库下载:https://github.com/scottjehl/Respond。

一旦你将respond添加到你的项目中，它基本上只是对在不同时间不同浏览器中添加和不添加的内容的一个普遍的期望。

最容易引起注意的缺失部分如下:

对于 IE8:

不支持border-radius

不支持box-shadow

不支持transform

不支持transition

placeholder不支持文本

这本质上意味着输入元素中的占位符文本不会显示，任何使用圆角或阴影的内容，或者元素上有任何类型的过渡或变换的内容都不会正确显示。

对于 IE9:

border-radius支持 IS

box-shadow支持 IS

支持transform(但仅限于-ms前缀)

不支持transition

placeholder不支持文本

就 IE9 而言，情况略有改善——圆角和阴影现在已经很好了，只要变换也有- ms前缀版本，变换也会起作用。

然而，输入元素上的过渡和占位符仍然很少。

当前浏览器中当前版本 BS3 的官方支持矩阵如下所示:

表 1:官方支持矩阵

| | 铬 | Firefox | ie | 歌剧 | Safari | | 安卓 | Yes | No | | No | | | IOs | Yes | | | No | Yes | | Mac OS X | Yes | Yes | | Yes | Yes | | 窗户 | Yes | Yes | Yes | Yes | No |

如果你的目标是 IE9 和 IE8，并使用respond.js来支持这些努力，那么请注意以下几点:

如果你在托管 CSS 等，你需要参考respond.js文档。在不同的域(例如 CDN)上，以减轻跨域问题。

浏览器安全性会给基于file://和@import的资源引用带来问题。

具体到@import就是respond.js无法正确阅读规则，这对 Drupal 用户很重要，因为 Drupal 使用@import相当频繁。

旧的 IE 兼容模式将完全停止 Bootstrap 的工作，而不仅仅是使用respond.js，所以如果您在仿真模式下使用现代 IE 测试向后兼容性，请小心——结果很可能不是您所期望的。*