@mdo 2018 年 2 月 21 日
仅仅一个月前,我们发布了期待已久的 Bootstrap 4 稳定版。它拥有全新的代码库,旨在更好地支持定制,并提供全新的组件和文档,是推出全新主题的最佳时机。今天,我们很高兴向您介绍全新的 Bootstrap 主题市场。
10 个新主题
在过去几个月里,我们一直在与主题创建者紧密合作,为您打造最佳主题。当我们创建最初的三个 Bootstrap 主题时,我们的目标是为所有使用 Bootstrap 的人提供最佳主题、构建工具、文档和支持。随着今天的更新,我们从全球设计师和开发人员社区中添加了 10 个新主题。
每个主题都基于 Bootstrap 4(稳定版,没有 beta 或 alpha 版本!),并附带自己的构建工具和客户支持。价格由创作者设定,定价鼓励独特且得到良好支持的主题。总的来说,这批首批主题开发人员创建的主题已被超过 500,000 人使用。我们很高兴扩大我们的主题用户群,突破高级主题的界限,并帮助每个人将他们的想法在网络上变为现实。
探索 Bootstrap 主题 »
出售您的主题
我们的 新市场 不仅仅用于购买主题。如果您是主题创建者,我们很乐意与您合作,将您的主题纳入其中,或构建新的独家主题。我们正在寻找新的创建者来设计和构建高质量的主题,提供一流的文档和支持,并帮助创建基于 Bootstrap 的独特体验。
了解更多信息,请访问 https://themes.getbootstrap.com/sell/>。
主题快乐,
@mdo、@dhg 和 @fat
@mdo 2018 年 1 月 18 日
我们花了数年时间才做到这一点,但 Bootstrap 4 终于来了!言语无法形容整个团队和我对这次发布的喜悦,但我将尽力而为。感谢大家,尤其是团队,以及所有通过拉取请求贡献代码或打开问题的人。谢谢。
自从我们上次发布 beta 版本以来,我们一直在努力稳定 CSS 的一些关键部分,完善我们的文档,添加一些额外的惊喜,并计划后续版本。我们仍然有一些问题需要解决,但没有什么能阻止我们发布稳定版本。
迫不及待地想开始使用?访问我们的文档网站 并探索。 务必查看我们的 新示例 和 迁移文档页面!
想要在深入文档之前了解更多信息吗?太好了,让我们开始吧!
新增功能
自上次测试版以来,没有重大更改,但我们进行了一些关键改进并修复了一些棘手的错误。
-
打印样式和实用程序类已更新。我们改进了打印页面的渲染方式,以确保页面大小合理,而不是像移动设备那样渲染。打印显示实用程序还包括大量新的 display
值,以匹配我们的标准显示实用程序。
-
添加了附加边框实用程序(例如,.border-top
),默认情况下为 1 像素的实线浅灰色边框。现在,您可以更轻松地快速将所有边框或部分边框添加到您的组件中。
-
我们的 $spacers
和 $sizes
Sass 地图已更新,以允许更多自定义,就像我们的颜色地图一样。您现在可以一致地添加、删除或替换所有键值对,以跨越我们的 CSS。 前往我们的主题文档 以获取更多信息和示例。
-
在我们的主题文档中添加了有关使用我们提供的 CSS 变量 的文档,这些变量适用于那些走在技术前沿且不想使用 Sass 的人。
-
添加了响应式 .order-0
和 .order-last
类,以更好地控制 flexbox 网格。
此外,我们对变量的重用和扩展以及代码的整体清理进行了大量改进。但,这还不是全部。
新示例
几乎所有示例都已针对我们的稳定版 v4 版本进行了全面修改。我们删除了一些过时的示例,添加了一些全新的示例,并对其他一些示例进行了彻底的修改。
以下是每个示例的更改概述
-
您可能已经看到了我们的 相册示例,但它已针对此版本进行了更新,以在我们的照片卡片中包含更多内容并改进移动渲染。
-
定价 是此版本中的全新示例,它是一个使用我们的实用程序和卡片组件构建的完全自定义页面。它具有响应性,并且易于扩展。
-
结账 是一个全新的、广泛的表单示例,它包含我们表单布局、验证样式、网格等的所有最佳部分。
-
产品 也是全新的,是对苹果风格营销页面的调侃,主要使用我们的实用类构建。别太当真!
-
博客 从头开始重写。两列蓝色标题布局已经消失。我们构建了一个讽刺的杂志风格布局,包含特色帖子和响应式导航。
-
仪表盘 也进行了全面改造,以展示一个实时 ChartJS 示例,包括一个使用 Feather 图标 的更新侧边栏,并且是半响应式的。
-
浮动标签 是全新的,它基于我们的登录示例,提供了一个纯 CSS 实现的浮动输入标签。这个是实验性的,在我们将其引入 Bootstrap 正式版之前可能会发生重大变化。
-
最后,画布 从头开始重写,以展示一个基于导航栏的抽屉,水平滚动导航,以及一些基于 媒体对象 和实用程序的自定义列表。
封面、轮播、登录 以及我们的 框架示例 只进行了细微的更新,以提高代码质量并修复一些较小的错误。总的来说,这对我们的示例来说是一个巨大的更新,我很高兴能够迭代这些示例并在未来的版本中添加更多内容。
记录我们的方法
v4 稳定版的新功能是简要概述了我们为什么要在 Bootstrap 中做一些事情的一些指导原则。我们的目的是提炼和记录我们在编写代码、构建 linter 和调试时一直记在脑海中的所有内容。其中大部分内容侧重于编写响应式 CSS、使用简单选择器以及限制需要编写的 JavaScript 数量的概念和策略。
查看新的方法页面,并确保打开一个问题或拉取请求,提供关于需要涵盖哪些其他内容的反馈和建议。
已知问题
没有哪个版本可以修复所有错误,我们的 v4 稳定版也是如此。以下是一些我们希望在时间和范围允许的情况下,在次要版本 (v4.1) 或补丁版本 (v4.0.1) 中首先解决的问题。
-
输入组、验证和圆角。 我为 Beta 3 重写了这个,我认为已经完美了,但我错了。我们有一些圆角问题,我们唯一能用 CSS 修复它们而不破坏向后兼容性的方法是限制组件的可扩展性。我们可能需要一个修饰符类来避免一些糟糕的 CSS 并满足所有关键功能。查看问题和交叉链接的 PR 以了解更多详细信息。
-
表格变体,特别是 .table-active
,有一个奇怪的选择器,我们无意中从之前的版本中保留了下来。这个 bug 导致 rgba()
背景颜色被应用了两次——一次用于 <tr>
,一次用于其中的任何 <td>
/<th>
元素。
还有一些问题尚未确认或计划在我们第一个补丁版本中发布,但预计在我们发布下一个次要版本之前,会有少量修复。我们也可能会在这个下一个补丁版本中打包我们仓库的默认分支更改。我们没有时间在不破坏 v3 的整个 Git 历史的情况下,测试一个高度不同的代码库的合并。再次强调,很快就会有更多信息。
下一个版本
说到版本,我们对我们正在取得的进展感到兴奋。我们的 GitHub 项目看板 基本上是最新的,关于即将发布的版本,所以请随时加入并查看。我们的下一个版本将是 v4.1(取决于任何 bug 修复补丁),并将专注于一系列小的新功能、实用程序、响应式字体大小等等。从那里,我们还有几个次要版本,围绕另一组功能进行集结。
我们计划在即将发布的次要版本中将 RTL 作为一部分,具体取决于整体范围。我们花了太长时间才承诺这样做,但我们正在努力。我们目前的计划集中在将 RTL 实现到我们的构建工具和组件中,以便您可以有条件地提供,例如,bootstrap.min.css
或 bootstrap-rtl.min.css
。请在开放问题中提供任何反馈;当我们准备好时,我们将与社区合作,启动一个新的拉取请求。
值得重申的是,每个次要版本都会带来我们文档的新托管版本。现在,我们有 getbootstrap.com/docs/4.0/
,在 v4.1 发布后,我们将拥有它以及 getbootstrap.com/docs/4.1/
。之前的版本将继续从我们的导航中链接,就像 v3.x 和最后一个 v4 alpha 一样。
主题更新
Bootstrap 主题 今年将迎来重大更新!自从我们最初推出 Bootstrap 主题以来,我们对大家的反响感到非常兴奋,我们终于准备好分享我们对未来的计划了。
在过去的几个月里,我们一直在与一些很棒的主题创建者合作,将他们的出色作品带到官方 Bootstrap 主题商店。我们很高兴地宣布,我们将扩展 Bootstrap 主题,包括十个全新的主题。我们目前的目标是第一季度发布,所有主题都基于 Bootstrap 4(抱歉,这些主题没有 v3)。根据最终审查,我们甚至可能在未来几周内将它们提供给你们。
Bootstrap 的影响力和实用性很大程度上来自世界各地的设计师、开发人员和创作者,他们使用 Bootstrap 构建业务并在此基础上构建业务。我们希望利用我们的平台为这些创作者提供更大的受众,并为你们提供最好的 Bootstrap 团队认可的主题。
请继续关注更多信息,因为我们正在准备发布。
感谢
最后,再次感谢所有为 Bootstrap 4 做出贡献的人。这是一段疯狂的旅程,我个人很欣慰、激动和焦虑地称它为稳定版。自 2015 年我们开始着手开发 v4 以来,v4 已经进行了大约 6000 次提交。我们已经尝试了各种方法,并且重写了太多东西太多次,但我对最终的结果感到非常高兴和幸运。
再次感谢所有为 Bootstrap 做出贡献和使用 Bootstrap 构建项目的人。能够与你们一起为你们构建这些工具,我感到非常荣幸。
@mdo 2017 年 12 月 28 日
欢迎使用 v4 的最终测试版!自从我们发布第二个测试版以来,已经过去了两个多月,我们一直在忙着进行最后的一些重大更改,然后才能进入下一个稳定版本 v4.0.0!我们进行了一些比计划中更多的重大更改,但不要担心,我们已经详细介绍了所有更改。
Beta 3 主要围绕我们的表单进行,但也包含了对表格、一些全局样式、我们的文档和一些 JavaScript 错误的关键修复。在此版本之后,我们将 解决一些问题和 PR,然后在新的一年开始的一两周内发布稳定版 v4。
让我们深入了解所有亮点。
重大变更
正如我们在 Beta 2 版本 中提到的,我们需要在 Beta 3 中进行一些重大变更。我们已在此处和我们的 迁移文档 中总结了这些变更,请务必阅读它们!
-
重写了原生和自定义复选框控件。 浏览器默认和自定义复选框和单选按钮现在在从 <label>
中删除 <input>
后具有更简单的标记。现在,所有复选框和单选按钮都有一个父 <div>
和兄弟 <input>
和 <label>
对。这对于表单验证和禁用输入至关重要,因为我们可以使用输入的状态来设置标签的样式。
此外,自定义复选框和单选按钮元素不再具有 .custom-control-indicator
。这是从新的 .custom-control-label
生成的。
-
输入组已使用特定的 .input-group-{prepend|append}
类重写。 新方法使我们能够在输入组中支持验证样式和消息,同时还添加了对自定义选择、自定义文件输入和多个 .form-control
的支持。
-
响应式表格再次成为父类,以避免更改 <table>
的 display
时出现可访问性问题。
-
删除了 .col-form-legend
类,将其样式合并到 .col-form-label
类中。
阅读 迁移页面 以获取更多详细信息。
更多亮点
除了重大变更之外,我们还解决了一些可能影响您项目的一些更一般的问题。
-
将 cursor: pointer
还原为非禁用的链接、按钮、.close
、导航栏切换器和分页链接。
-
使用 .modal-dialog-centered
添加了一个新的垂直居中的模态选项。
-
在 #23860 中为下拉菜单添加了新的 dropleft 和 dropright 变体。
-
我们的 npm 包不再包含除源代码和 dist JavaScript 和 CSS 文件以外的任何文件。如果您之前依赖通过 node_modules
文件夹运行我们的脚本,则需要更新您的构建工具。
-
打印样式已移至导入堆栈的底部,以正确覆盖样式。
有关此版本更改的更多详细信息,请查看 Beta 3 发货列表问题,以及 Beta 3 项目。请务必 加入我们的官方 Slack 房间! 并深入 我们的问题跟踪器,尽可能提供错误报告、问题和具体反馈。
即将推出
稳定的 v4.0.0 是我们的下一个版本,我们已经有一个 GitHub 项目看板 来跟踪问题和 PR。从 Beta 3 到稳定版不会有任何重大更改,因此我们的变更日志应该简短明了。预计会有一些 linting、Sass 变量改进、更新的文档示例以及更多构建工具改进。
在我们的下一个版本中,master
分支将再次成为我们的默认分支。我们将把 v4-dev
合并到 master
中,这意味着 v3 的源代码将只存在于我们的 v3-dev
分支和 过去的版本 中。
很快再见!
@mdo 2017 年 10 月 19 日
就在两个多月前,我们发布了 Bootstrap 4 的第一个 beta 版,现在我们准备与大家分享我们的第二个 beta 版。我们改进了自定义、文档、构建工具和命名不一致问题,同时修复了大量错误。
我们尽力避免重大更改,但不得不偷偷加入一些。遗憾的是,我们将在 Beta 3 中再加入一些。但是,我们正在清楚地列出所有这些更改,以便您尽可能轻松地进行升级和测试。
好消息来了——Beta 2 版本发布了!
亮点
在过去的两个月里,我们提交了超过 500 次代码变更,因此与 Beta 1 版本相比,我们有一些值得分享的更新。
改进主题
我们发布了全新的 主题文档页面 来替换旧的选项页面(我们会自动将用户从旧页面重定向到新页面)。这个新页面深入探讨了 Sass 文件的结构、默认变量及其自定义、使用的映射和循环、函数、颜色,当然还有全局 Sass 选项。它还包括一个新部分,解释了我们如何通过 Sass 映射和循环构建组件,特别是我们的修饰符类(例如:.btn-danger
)。
除了文档更改之外,我们还对 CSS 做了一些更改,以改进用户与主题选项的交互方式。
-
除了映射之外,我们还添加了新的主题颜色变量。现在,您可以根据需要使用 $primary
或 theme-color("primary")
。$theme-colors
中的值现在也映射到这些新变量,而不是直接映射到颜色。
-
我们改进了自定义 Sass 映射的功能。在 Beta 1 版本中,我们没有设置可以修改 $theme-colors
映射而无需完全替换它的方法。这个问题在 Beta 2 版本中得到了修复——您可以覆盖现有值并根据需要添加更多值。我们的新主题文档页面将向您展示如何操作。
最后,我们的 $enable-shadows
和 $enable-gradients
Sass 变量终于得到了更新,并集成到我们的几个组件中。现在,当您启用这些变量(默认情况下都为 false
)并重新编译时,您将在警报、按钮、轮播、自定义表单控件和下拉菜单项中看到微妙的渐变和阴影。
当您使用 $enable-gradients
时,您将启用新的 .bg-gradient-
实用程序(默认情况下禁用),以便在导航栏等地方使用。
请查看并分享您在问题中的任何反馈。
偏移网格类
我们把它们带回来了!在 Beta 1 版本之前,我们过早地删除了它们,低估了 .offset-
类对我们的网格系统的吸引力。自动边距对你们来说是不够的。样式已经恢复,我们的网格文档也已更新。尽情享受吧!
更新迁移文档
鉴于我们自 Beta 1 版本以来进行了一些重大更改,我们在 迁移文档页面 中添加了一个新部分,详细说明了我们所做的哪些更改可能导致您的代码出现问题。我们不得不重命名一些类,以确保所有内容与项目中的其他部分保持一致。
我们将以同样的方式在 Beta 3 版本中更新此页面。
还有更多!
- 在模态框上引入了新的
pointer-events
用法。外部 .modal-dialog
通过 pointer-events: none
传递事件以进行自定义点击处理(使其能够仅在 .modal-backdrop
上监听任何点击),然后通过 pointer-events: auto
为实际的 .modal-content
抵消它。
- 响应式表格现在为每个网格断点生成类,这意味着我们已经添加了
.table-responsive-{sm,md,lg,xl}
到已经存在的 .table-responsive
中。您可能需要根据您希望表格何时调整大小来调整您的用法。
- 从
.badge
中删除不必要的 color
及其关联的 $badge-color
变量。
- 包含两个新的 dist 文件,它们在
bootstrap.bundle.js
和 bootstrap.bundle.min.js
中包含 Popper.js。
- 放弃对 Bower 的支持,因为他们已经弃用了该包管理器。
- 将面包屑从
float
切换到 flexbox。
- 切换到 Stylelint 来满足我们的 CSS 代码风格检查需求。
- 我们现在在编译后的 CSS 中输出一些 CSS 变量,以便于使用我们的 dist 文件进行原型设计和自定义。
- 将
color-yiq
从包含 color
属性的 mixin 更改为返回值的函数,允许您将其用于任何 CSS 属性。
即将在 Beta 3 中发布
Beta 3 是我们的下一个版本,并且已经有一个 GitHub 项目看板 设置来跟踪问题和 PR。除了标准的文档改进和错误修复之外,我们还有一些问题和 PR 在我们心中。
如果您对何时合并到我们的 v4-dev
分支感兴趣,请务必关注这些问题和 PR。
走向 v4 正式版
在 Beta 3 之后,我们希望能够快速进入最终的 v4 版本。理想情况下,它也会比 Alpha 6 到 Beta 1 的过渡更加平滑和专注。我们从许多人那里听说,这两个版本之间的差异太大。
有关此版本更改的更多详细信息,请查看 Beta 2 发行清单问题,以及 Beta 2 项目。请务必 加入我们的官方 Slack 房间! 并深入 我们的问题跟踪器,尽可能地提交错误报告、问题和一般反馈。
@mdo 2017 年 8 月 10 日
历时两年,我们终于发布了 Bootstrap 4 的第一个 Beta 版本。在这段时间里,我们至少 27 次彻底重构了所有内容,进行了近 5,000 次提交,更改了 650 多个文件,添加了 67,000 行代码,删除了 82,000 行代码。我们还发布了六个主要的 Alpha 版本,三个官方主题,甚至还发布了一个招聘板。简而言之?该发布了。
Beta!?
长话短说,发布 Beta 版本意味着我们将在下一个主要版本(v5)之前停止破坏你的所有东西。我们并不完美,但我们会尽力保持所有类、功能和文档 URL 与此版本中显示的一致。我们始终可以添加更多内容,但不能删除任何内容。
对于那些没有使用 v4 Alpha 版本的用户,以下是一些亮点,帮助你快速了解。
- 从 Less 转到 Sass。 Bootstrap 现在比以往更快地编译,这得益于 LibSass,我们也加入了越来越多的 Sass 开发者社区。
- Flexbox 和改进的网格系统。 我们已将几乎所有内容迁移到 flexbox,添加了一个新的网格层以更好地针对移动设备,并彻底改造了我们的源 Sass,使其拥有更好的变量、mixin,现在还包括映射。
- 卡片的嵌入式井、缩略图和面板。 卡片 是 Bootstrap 的一个全新组件,但它们会让你感觉非常熟悉,因为它们几乎可以完成井、缩略图和面板所做的一切,只是做得更好。
- 分叉 Normalize.css 并将我们所有的 HTML 重置整合到一个新的 CSS 模块 Reboot 中。 Normalize.css 采取了与我们期望不同的路径,放弃了一些我们长期依赖的核心 CSS 调整。Reboot 采用 Normalize.css 的核心,并将其扩展为包含更多有主见的重置,例如
box-sizing: border-box
、边距调整等等,所有这些都包含在一个单独的 Sass 文件中。
- 全新的自定义选项。 我们没有将像渐变、过渡、阴影、网格类等等这样的样式修饰放到像 v3 这样的单独样式表中,而是将所有这些选项都移到了 Sass 变量中。想要在所有元素上使用默认过渡或禁用圆角?只需更新一个变量并重新编译。
- 放弃了对 IE8 和 IE9 的支持,放弃了旧版浏览器的支持,并迁移到使用 rem 单位进行组件大小调整,以利用更新的 CSS 支持。除了我们的网格之外,像素已在适当的地方被替换为 rems 和 ems,以使响应式排版和组件大小调整更加容易。需要支持 IE8/IE9、Safari 8-、iOS 8- 等?继续使用 Bootstrap 3。
- 重写了我们所有的 JavaScript 插件。 每个插件都已使用 ES6 重写,以利用最新的 JavaScript 增强功能,包括新的拆卸方法、选项类型检查、新方法等等。
- 借助名为 Popper.js 的库,改进了工具提示、弹出框和下拉菜单的自动放置。
- 重新设计并改进了文档。 我们重新设计了它,用 Markdown 重写了所有内容,并添加了一些方便的插件来简化示例和代码片段,使使用我们的文档变得更加容易。我们还添加了一个很棒的新搜索表单!
- 新的构建工具 完全用 npm 脚本重写,而不是 Grunt,极大地简化了开发和贡献 Bootstrap 的过程。
- 还有更多! 自定义表单控件、重新设计的轮播、经过全面修改的导航栏、HTML5 表单验证样式、数百个响应式实用程序类、新组件等等也已包含在内。
好的,呼,想了解更多?继续阅读,或者直接跳转到 那些全新的文档!
新外观
Bootstrap 4 在我们的 alpha 版本中一直保持着略微更新的外观,但直到最近我们才对文档和组件进行了更新。
除了新的配色方案和新的系统字体外,我们的文档还采用了全新的布局。此 beta 版本的新功能包括由 Algolia 的 DocSearch 提供支持的出色搜索表单,改进的页面布局,包括粘性导航栏和侧边栏,以及新的目录。
有关此版本更改的更多详细信息,请查看 Beta 1 发货清单问题,以及 已关闭的 Beta 1 里程碑。请务必 加入我们的官方 Slack 房间! 并尽可能多地参与 我们的问题跟踪器,提交错误报告、问题和一般反馈。