如何使用 Bootstrap Grid（一步一步）
如何使用 Bootstrap Grid（一步一步）
介绍
在本文中，您将练习使用 Bootstrap Grid 构建网页。
目标
- 为 Little Lemon 创建一个包含两列的食物菜单。
目标
- 设置引导容器。
- 使用 Bootstrap 在网页顶部中心显示 Little Lemon 徽标。
- 使用 Bootstrap Grid 在两列中显示食物菜单。
指示
步骤1： 打开 index.html
第2步： 在 body 元素中添加一个 div 元素。这个 div 将是 Bootstrap 容器。
第 3 步： 使用值容器将类属性添加到此元素。
<body> <div class="container"> </div> </body>
第4步： 将三个 div 元素添加到 Bootstrap 容器元素。这些 div 元素中的每一个都将是一个 Bootstrap 行。使用值行将类属性添加到此元素。
<body> <div class="container"> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> </div> </body>
第 5 步： 第一行将包含 Little Lemon 徽标。将 div 元素添加到第一行。
第 6 步： 将值为 col-12 的类属性添加到此元素。这将占用 12 个列空间。
<body> <div class="container"> <div class="row"> <div class="col-12"> </div> </div> <div class="row"> </div> <div class="row"> </div> </div> </body>
第 7 步： 将另一个 div 元素添加到 col-12 元素。
第 8 步： 使用值 text-center 将 class 属性添加到此元素。这将允许您将徽标居中。
<body> <div class="container"> <div class="row"> <div class="col-12"> <div class="text-center"> </div> </div> </div> <div class="row"> </div> <div class="row"> </div> </div> </body>
第 9 步： 在 text-center 元素中添加一个应用了 img-fluid 类的图像元素。
<body> <div class="container"> <div class="row"> <div class="col-12"> <div class="text-center"> <img src="logo.png" class="img-fluid"> </div> </div> </div> <div class="row"> </div> <div class="row"> </div> </div> </body>
第 7 步： 在第二行中，添加另一个类 col-12 的 div 元素。
<body> <div class="container"> <div class="row"> <div class="col-12"> <div class="text-center"> <img src="logo.png" class="img-fluid"> </div> </div> </div> <div class="row"> <div class="col-12"> </div> </div> <div class="row"> </div> </div> </body>
第 8 步： 将 div 元素添加到列并应用类 text-center。
<body> <div class="container"> <div class="row"> <div class="col-12"> <div class="text-center"> <img src="logo.png" class="img-fluid"> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="text-center"> </div> </div> </div> <div class="row"> </div> </div> </body>
第 9 步： 在元素内部，添加一个带有文本 Our Menu 的 h1 元素。
<body> <div class="container"> <div class="row"> <div class="col-12"> <div class="text-center"> <img src="logo.png" class="img-fluid"> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="text-center"> <h1>我们的菜单</h1> </div> </div> </div> <div class="row"> </div> </div> </body>
第 10 步： 在最后一行添加两个 div 元素。
第 11 步： 为每个元素添加一个类属性，其值为 col-12 col-lg-6。
<body> <div class="container"> <div class="row"> <div class="col-12"> <div class="text-center"> <img src="logo.png" class="img-fluid"> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="text-center"> <h1>我们的菜单</h1> </div> </div> </div> <div class="row"> <div class="col-12 col-lg-6"> </div> <div class="col-12 col-lg-6"> </div> </div> </div> </body>
第 12 步： 在第一个 col-12 col-lg-6 元素中添加以下元素：
- 包含文本 Falafel 的 h2 元素。
- 一个段落元素，包含文本 Chickpea、herbs、spices。
- 包含文本 Fried Calamari 的 h2 元素。
- 包含文本 Squid, buttermilk 的段落元素。
第十三步： 在第二个 col-12 col-lg-6 元素中添加以下元素：
- 包含文本 Pasta Salad 的 h2 元素。
- 包含文本生菜、蔬菜、马苏里拉奶酪的段落元素。
- 包含文本希腊沙拉的 h2 元素。
- 包含文本 Cucumbers, onion, feta cheese 的段落元素。
第 14 步： 保存文件。
第 15 步： 点击编辑器右下角的“上线”。
一旦服务器启动并运行，您将看到暴露的端口。
第 16 步： 现在点击浏览器预览。
输入网址为 http://localhost：
第十七步： 选择设备工具栏并选择 Macbook 15 作为设备。
第十八步： 验证网页是否在两列中显示 Little Lemon 菜单。您的网页应该类似于下面的屏幕截图。
第十九步： 完成实验后，请确保通过单击公开的端口号（例如 5500）来关闭服务器。
您应该会看到这样的通知，确认服务器已停止。
提示
- 确保将列添加到行元素。
- 请记住，Bootstrap 使用 12 列网格系统。
- 复习课程 使用引导样式 和 引导网格
祝你好运。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
