前端库Bootstrap框架：「01] 使用 Fluid 容器实现响应式设计

Posted 2021-06-04 路条编程

Bootstrap 是一个前端框架，用于设计响应式 web 页面和 web 应用程序。它采用移动优先的方法来开发 web。Bootstrap 包括预构建的 CSS 样式和类，以及一些 javascript 功能。Bootstrap 采用响应式 12 列网格布局，并具有以下设计组件模板：按钮、图片、表格、表单、导航，本专题介绍在 web 项目中使用 Bootstrap 框架的一些方法。

从今天开始，我们使用使用最受欢迎的响应式 CSS 框架 Bootstrap 框架对宠物猫应用进行设计。

Bootstrap 会根据你的屏幕大小来调节 html 元素的大小————因此称为 Responsive Design（响应式设计）。

通过响应式设计，我们将无需额外设计一个手机版的网页，因为它在任何尺寸的屏幕上看起来都还不错。

无论开发什么应用，您都可以通过将以下代码添加到你的 HTML 顶部来引入 Bootstrap 。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

在该示例中，我们已经帮您把相应代码添加到页面中。记住使用 > 和 /> 闭合 link 标签来保证引入成功。

首先，我们应该把所有 HTML 标签放在 class 为 container-fluid 的 div 元素下（除了 link 标签和 style 标签）。

具体代码示例如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/><div class="container-fluid">
<h2 class="red-text">宠物猫应用</h2>
<p>点击此处<a href="#">猫图片</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="一只可爱的橙色猫躺在它的背上"></a>
<p>宠物猫爱好:</p><ul> <li>吃鱼</li> <li>嬉戏</li> <li>吃猫粮</li></ul><p>最讨厌的三件事:</p><ol> <li>跳蚤</li> <li>打雷</li>  <li>狗</li></ol><form action="http://www.icoderoad.com/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor"> 户内</label> <label><input type="radio" name="indoor-outdoor"> 户外</label> <label><input type="checkbox" name="personality"> 爱</label> <label><input type="checkbox" name="personality"> 懒惰</label> <label><input type="checkbox" name="personality"> 疯狂</label> <input type="text" placeholder="cat photo URL" required> <button type="submit">提交</button></form></div>