Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 4 教程

Bootstrap 4 是 Bootstrap 的最新版本,它是用于开发响应式、移动优先网站的最流行的 HTML、CSS 和 JavaScript 框架。

Bootstrap 4 是完全免费下载和使用!

立即开始学习 Bootstrap 4 »

学习 Bootstrap 4


动手试一试示例

本 Bootstrap 4 教程包含数百个 Bootstrap 4 示例。

使用我们的在线编辑器,您可以编辑代码,并点击按钮查看结果。

Responsive Bootstrap Page

Bootstrap 4 示例

<div class="jumbotron text-center">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>调整此响应式页面的大小以查看效果!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>列 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>列 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>列 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>
动手试一试 »

点击“动手试一试”按钮查看其工作原理。



Bootstrap 5 vs. Bootstrap 3 & 4

本教程遵循 **Bootstrap 4**,该版本于 2018 年发布,是对 Bootstrap 3 的升级,具有新组件、更快的样式表、更多响应式等功能。

Bootstrap 5(于 2021 年发布)是 Bootstrap 的最新版本;它支持所有主要浏览器和平台的最新稳定版本。但是,不支持 Internet Explorer 11 及以下版本。

Bootstrap 5 和 Bootstrap 3 & 4 之间的主要区别在于,Bootstrap 5 已切换到 JavaScript 而不是 jQuery

**注意:** Bootstrap 3 和 Bootstrap 4 仍受团队支持,用于关键错误修复和文档更改,并且可以安全地继续使用它们。但是,不会为它们添加新功能。


Bootstrap 4 基本模板

我们创建了一个使用 Bootstrap 4 的响应式启动模板。您可以自由修改、保存、共享和在项目中使用它。


我的学习

使用 W3Schools 上的免费“我的学习”程序跟踪您的进度。

登录您的帐户,开始赚取积分!

这是一个可选功能。您可以在 W3Schools 学习,而不使用“我的学习”。

Track your progress with at W3Schools.com

Bootstrap 参考

包含所有 Bootstrap 4 CSS 类及其描述和示例的完整列表

如果您想使用 Bootstrap 组件做更多的事情,请查看我们完整的 Bootstrap 4 JavaScript/jQuery 参考 - 所有内容都包含“动手试一试”示例


Bootstrap 4 练习

通过练习测试自己

练习

使用 Bootstrap 类将以下文本居中

<p class=""> Hello World!</p>

开始练习


Bootstrap 4 问答测试

在 W3Schools 上测试您的 Bootstrap 4 技能!

开始 Bootstrap 4 问答测试!


您知道吗?

W3.CSS 是 Bootstrap 的一个极佳替代方案。

W3.CSS 更小、更快且更易于使用。

如果您想学习 W3.CSS,请访问我们的 W3.CSS 教程


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.