Bootstrap 响应式布局
在本教程中，您将学习如何使用 Bootstrap 框架创建响应式网站。
什么是响应式网页设计
响应式网页设计是设计和构建网站的过程，通过针对不同设备进行优化，为用户提供更好的可访问性和最佳的查看体验。
随着智能手机和平板电脑的发展趋势，几乎不可避免地忽略了针对移动设备的网站优化。 响应式网页设计是一种更可取的替代方案，也是一种有效的方式，可以以更少的努力针对各种设备。
响应式布局会自动调整并适应任何设备屏幕尺寸，无论是台式机、笔记本电脑、平板电脑还是手机。 见下图。
使用 Bootstrap 创建响应式布局
使用 Bootstrap 4 强大的移动优先 flexbox 网格系统创建响应式和移动友好的网站和应用程序已经 变得容易多了。
Bootstrap 4 从一开始就具有响应性和移动友好性。 它的五层网格类可以更好地控制布局以及如何在不同类型的设备（如手机、平板电脑、笔记本电脑和 台式机、大屏幕设备等。
以下示例将创建一个响应式布局，在超大设备（视口 ≥ 1200px）中呈现为 4 列布局，在大型设备中呈现为 3 列布局（992px ≤ viewport < 1200px），而 2 列 中型设备中的布局（768px ≤ viewport < 992px），小型和超小型设备中的 1 列布局（viewport < 768px）。 让我们看看它是如何工作的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Responsive Layout Example</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
<div class="container-fluid">
<a href="#" class="navbar-brand mr-3">Tutorial Republic</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-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 ml-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="jumbotron">
<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" 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">
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>HTML</h2>
<p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own website.</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 is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</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 is the most popular and widely used client-side scripting language. Our JavaScript tutorials will provide in-depth knowledge of the JavaScript including ES6 features, so that you can create interactive websites.</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 is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive 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>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 is a standard language designed for managing data in relational database management system. Our SQL tutorials will help you to learn the fundamentals of the SQL language so that you can efficiently manage your databases.</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>Our references section outlines all the standard HTML5 tags and CSS3 properties along with other useful references such as color names and values, character entities, web safe fonts, language codes, HTTP messages, and more.</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>Our Frequently Asked Questions (FAQ) section is an extensive collection of FAQs that provides quick and working solution of common questions and queries related to web design and development with live demo.</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 © 2019 Tutorial Republic</p>
</div>
<div class="col-md-6 text-md-right">
<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 编辑器中的 
链接）并调整屏幕大小，您将看到内容框的方向在视口宽度越过或接近某个特定值时发生变化 限制（即断点）。
Advertisements