标签：Bootstrap 一步 元素 添加 Grid div 12 col
如何使用 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 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/25862/19071100
标签：Bootstrap,一步,元素,添加,Grid,div,12,col 来源： https://www.cnblogs.com/amboke/p/16683275.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。