如何使用 Bootstrap 3 创建多个响应列
已发表: 2022-02-16
您想使用 Bootstrap 提高您的网站响应能力吗？ Bootstrap 最重要的方面是它的 12 列移动优先网格系统。 这是您用来创建响应式布局的方法。
在本视频教程中，您将使用 Bootstrap 创建一个基本网站，并学习如何使用 Bootstrap 网格系统创建具有多列的响应式布局。
在观看教程之前
在您能够按照下面的视频教程学习如何创建自己的响应式列之前，您需要：
- 基本了解什么是 Bootstrap
- 基本了解什么是 Bootstrap 网格系统
- 将 Bootstrap 下载到您的硬盘
- 创建一个基本的 Bootstrap index.html 文件来构建
什么是引导程序
- Bootstrap 是一个供 HTML、CSS 和 JavaScript 开发人员致力于网站响应能力的框架。
- 它包含已经为列、列表、导航、Web 表单和许多其他 Web 元素构建的响应式 CSS 样式。
了解引导网格系统
- Bootstrap 网格系统将屏幕尺寸分为四种类型：超小、小、中和大。
- Extra-small 适用于手机。 Small 适用于平板电脑，例如 I-Pad。 Medium 用于桌面显示器。 而 Large 仅适用于较大的桌面显示器。
- 为了帮助您微调这四种类型屏幕的响应能力，Bootstrap 将 Web 查看设备的宽度划分为 12 列网格系统。
- 这四种 Bootstrap Grid 类型中的每一种只有在您为其分配自己指定的 CSS 类时才会响应。
- 例如，要让 div 响应超小型设备，div 必须有自己的 Bootstrap .col-xs-<number_of_columns_to_take> 类，如 <div class="col-xs-6">。
下载引导程序
- 转到 getboostrap.com 并单击“下载 Bootstrap”按钮：
- 您将看到“入门”页面。 单击“下载引导程序”按钮：
- 将此文件保存到您的计算机硬盘驱动器，无论您想要的任何地方。 它不必保存到 Web 服务器。
- 解压缩此文件并将提取的文件夹重命名为“bootstrap”。
准备你的基本引导 index.html 页面
步骤1。 创建您的引导程序 index.html 文件
- 回到“Getting Started”（http://getbootstrap.com/getting-started/#download）页面，点击右侧边栏的“Basic Template”链接：
- 您将看到“基本模板”代码。 点击“复制”按钮复制代码：
- 将“基本模板”代码粘贴到文本编辑器中，并将其作为 index.html 保存在保存“引导程序”文件夹的同一文件夹中。 它现在将成为您的 Bootstrap 网站首页。
- 打开新创建的 index.html 并查看您的基本 Bootstrap 网站：
- 在文本编辑器中打开 index.html 文件，在 <body> 和 <h1> 标签之间添加 <div class="container"> (1)。 在结束 </h1> 标记 (2) 之后关闭这个新 div 并保存文件：
- 检查页面前端并注意“Hello World！” 不再粘在页面边缘，现在稍微向右移动，使其看起来更整洁。 您分配给此 div 的 Bootstrap 的“容器”类已在此文本中添加了一些边距：
- 返回到您的 index.html 文件。 在 <h1> 和 </h1> 标记之间替换“Hello World！” 到“Trusthub”。 保存文件并检查您的网站前端。
第2步。 添加一些内容和侧边栏
- 返回您的 index.html 文件并在 <h1>Trustub</h1> 代码下方复制粘贴以下代码：
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>
- 返回您的网站前端。 刷新它。 您现在应该看到您的内容和“我们的团队”侧边栏，还没有列式响应式布局：
- 返回 getbootstrap.com 网站并在顶部菜单上单击“CSS”按钮：
- 在侧边栏上单击“网格系统”按钮：
- 向下滚动页面到“网格选项”部分 (1)，并注意 Bootstrap 12 列网格系统及其四种屏幕尺寸类型、宽度和指定的 CSS 类前缀 (2)：
- 如果 Bootstrap 网格系统选项对您没有意义，请不要担心。 当您开始在您的网站上玩它们时，它会在一秒钟内为您汇集在一起 。
- 再次打开 index.html 文件，在 <div class="row"> 下方，为现有的 <div> 输入类“col-md-9”。 您的新 div 现在应该看起来像“div class="col-md-9">：
- 现在转到您的 div，它位于 <h2>“Out Team”标题的正上方，并为其指定“col-md-3”引导网格 CSS 类。 保存文件：
- 返回您的站点以查看此更改的实际效果。 按键盘上的 F5 键刷新您的网站。 现在您将看到您的内容区域和侧边栏并排放置。
- 您的内容 div 现在占用了 Bootstrap 网格 12 列中的 9 个可用列（占整个桌面屏幕宽度的 75%）。 并且您的侧边栏需要 3 个 Bootstrap 网格 12 列（整个桌面屏幕宽度的 25%）：
杰出的！ 您现在都可以按照下面的视频教程进行操作了。 让我们开始吧。
恭喜！ 您刚刚学习了如何使用 Bootstrap 创建具有多列的响应式网页布局。 您想了解更多有关 Bootstrap 的信息吗？ 如果是，请访问我们的 OSTraining YouTube 频道并观看“引导框架教程”。