Bootstrap 响应式布局
在本教程中，您将学习如何使用 Bootstrap 框架创建响应式网站。
什么是响应式网页设计
响应式网页设计是设计和构建网站的过程，通过针对不同设备进行优化，为用户提供更好的可访问性和最佳的查看体验。
随着智能手机和平板电脑的发展趋势，几乎不可避免地忽略了针对移动设备的网站优化。 响应式网页设计是一种更可取的替代方案，也是一种有效的方式，可以以更少的努力针对各种设备。
响应式布局会自动调整并适应任何设备屏幕尺寸，无论是台式机、笔记本电脑、平板电脑还是手机。 请参见下图。
使用 Bootstrap 创建响应式布局
借助 Bootstrap 强大的移动优先 flexbox 网格系统，创建响应式和移动友好的网站和应用程序变得更加容易。
Bootstrap 从一开始就具有响应性和移动友好性。 它的 六层网格类 可以更好地控制布局以及如何在不同类型的设备（如手机、平板电脑、笔记本电脑和台式机、大屏幕设备等）上呈现。
以下示例将创建一个响应式布局，在超大设备（视口 ≥ 1200px）中呈现为 4 列布局，在大型设备（992px ≤ 视口 < 1200px）中呈现为 3 列布局，而在中型设备（768px ≤ 视口 < 992px）中呈现为 2 列布局 ，以及小型和超小型设备中的 1 列布局（视口 < 768px）。 让我们尝试一下，看看它是如何工作的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Responsive Layout Example</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a href="#" class="navbar-brand">Tutorial Republic</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Services</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link">Register</a>
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="p-5 my-4 bg-light rounded-3">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="http://www.qyoo.cn" class="text-success" target="_blank">qyoo.cn</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
<p><a href="http://www.qyoo.cn" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
</div>
<div class="row g-3">
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>HTML</h2>
<p>HTML 是用于描述网页结构的标准标记语言。 我们的 HTML 教程将帮助您了解最新 HTML5 语言的基础知识，以便您可以创建自己的网站。</p>
<p><a href="http://www.qyoo.cn/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>CSS</h2>
<p>CSS 用于描述网页的呈现方式。 CSS可以节省很多时间和精力。 我们的 CSS 教程将帮助您学习最新 CSS3 的基本知识，以便您可以控制网站的样式和布局。</p>
<p><a href="http://www.qyoo.cn/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>JavaScript</h2>
<p>JavaScript 是最流行和广泛使用的客户端脚本语言。 我们的 JavaScript 教程将提供 JavaScript 的深入知识，包括 ES6 特性，以便您可以创建交互式网站。</p>
<p><a href="http://www.qyoo.cn/javascript-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>Bootstrap</h2>
<p>Bootstrap 是一个功能强大的前端框架，用于更快、更轻松地进行 Web 开发。 我们的 Bootstrap 教程将帮助您了解最新 Bootstrap 4 框架的所有功能，以便您轻松创建响应式网站。</p>
<p><a href="http://www.qyoo.cn/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>PHP</h2>
<p>PHP is the most popular server-side scripting language for creating dynamic web pages. Our PHP tutorials will help you to learn all the features of latest PHP7 scripting language so that you can easily create dynamic websites.</p>
<p><a href="http://www.qyoo.cn/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>SQL</h2>
<p>SQL 是一种标准语言，用于在关系数据库管理系统中管理数据。 我们的 SQL 教程将帮助您学习 SQL 语言的基础知识，以便您可以有效地管理您的数据库。</p>
<p><a href="http://www.qyoo.cn/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>References</h2>
<p>我们的参考部分概述了所有标准 HTML5 标记和 CSS3 属性以及其他有用的参考，例如颜色名称和值、字符实体、Web 安全字体、语言代码、HTTP 消息等。</p>
<p><a href="http://www.qyoo.cn/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>FAQ</h2>
<p>我们的常见问题 (FAQ) 部分是一个广泛的常见问题集合，通过现场演示提供与网页设计和开发相关的常见问题和查询的快速有效的解决方案。</p>
<p><a href="http://www.qyoo.cn/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright © 2021 Tutorial Republic</p>
</div>
<div class="col-md-6 text-md-end">
<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
</div>
</body>
</html>提示： 在新的空白窗口中打开此示例的输出（单击 CodeLab 编辑器中的 
链接）并调整屏幕大小，当视口宽度超过或接近某个限制（即 breakpoints）时，您将看到内容框的方向发生变化。
Advertisements