Bootstrap教程(3)--容器与网格

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
简介: 本文目录1. 网格的意义2. 网格的使用2.1 引入Bootstrap2.2 建立容器2.3 创建行2.4 创建列2.5 列的偏移3. 小结

1. 网格的意义

传统的网页布局,在垂直方向上分割是很简单的,只需要添加块级元素例如<div>即可轻易的在垂直方向上进行分割。


但是在实际的需求中,我们需要在水平方向上进行分割,最好可以实现按比例水平分割。例如左侧1/3作为导航栏,右侧2/3作为内容区域。


水平比例分割如果用CSS来实现,是比较麻烦的,但是Bootstrap网格系统可以轻易的实现这一点。


2. 网格的使用

我们借助一个经典实例来演示下Bootstrap中如何使用网格,该实例就是上方为导航栏,中间区域的左侧为导航栏,右侧为内容区域,这是一个经典的后台管理页面布局方式。


2.1 引入Bootstrap

首先在页面引入Bootstrap。

<html>
<head>
    <title>boostrap-grid</title>
    <meta charset="utf-8">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- 引入jQuery -->
    <script src=" https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

2.2 建立容器

Bootstrap网格需要放置到容器内,容器有两种,即固定宽度的container和非固定宽度的container-fluid

我们来看下具体有何不同,代码如下:

<body>
    <div class="container" style="background-color: grey">
        container测试
    </div>
    <div class="contaier-fluid" style="background-color:green">
        contaier-fluid测试
    </div>
</body>

image.png

2.3 创建行

在我们的设计中,网页应该有2行,第1行为上方标题栏,第2行放置导航栏和内容区域。

Bootstrap中用row表示一行,所以代码修改如下。

<body>
    <div class="contaier-fluid">
        <div class="row">
        </div>
        <div class="row">
        </div>
    </div>
</body>

2.4 创建列

接下来就是网格系统的重点了,在水平方向上按比例设置列。


BootStrap的网格列设置很有意思,会把一行分为12份,我们可以任意设定当前列占12份中的几份。


例如标题栏,只有1列,所以占全部的12份;而导航栏和内容区域占据12份中的4份和8份,这样正好是1/3和2/3,所以代码如下,注意添加背景色是为了便于区分演示。

      <div class="contaier-fluid">
        <div class="row">
            <div class="col-md-12" style="background-color:grey">标题栏</div>
        </div>
        <div class="row">
            <div class="col-md-4" style="background-color: green">导航栏</div>
            <div class="col-md-8" style="background-color: orange">内容区域</div>
        </div>
    </div>

image.png

2.5 列的偏移

可以使用.col-md-offset-#移动各列,其中#处填写数字,表示偏移的列数,例如如下代码就向右侧偏移了1列。


     <div class="row">

           <div class="col-md-3 col-md-offset-1" style="background-color: green">导航栏</div>

           <div class="col-md-8" style="background-color: orange">内容区域</div>

       </div>


所以效果如下,第3行即为偏移后的效果。

image.png


相关文章
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
|
26天前
|
前端开发
Bootstrap 5 网格的基本结构
Bootstrap 5 网格系统的基本结构包括创建行(`&lt;div class=&quot;row&quot;&gt;`)和列(`&lt;div class=&quot;col-*-*&quot;&gt;`)。第一个星号表示响应的设备大小(sm, md, lg, xl),第二个星号表示列宽,同一行的列宽总和为 12。不指定数字时,Bootstrap 会自动分配等宽的列。例如,两个 `col` 列各占 50%,三个 `col` 列各占 33.33%。
|
26天前
|
前端开发
Bootstrap 5 网格的基本结构 创建相等宽度的列,Bootstrap 自动布局
Bootstrap 自动布局允许创建响应式等宽或不等宽的列。例如,使用 `.col` 类可创建等宽列;使用 `.col-sm-*` 类可在不同屏幕尺寸上自定义列宽,如 `.col-sm-3` 表示在小屏幕及以上设备上占 1/4 宽度。未指定宽度的列将自动均分剩余空间。
|
26天前
|
前端开发
Bootstrap 5 网格的基本结构
Bootstrap 5 网格系统基于 12 列布局,通过 `.row` 和 `.col-*-*` 类实现响应式设计。`.col-*-*` 中的第一个星号表示设备类型(sm, md, lg, xl),第二个星号表示列宽。不指定数字时,Bootstrap 自动均分列宽。
|
1月前
|
弹性计算 Kubernetes 网络协议
阿里云弹性网络接口技术的容器网络基础教程
阿里云弹性网络接口技术的容器网络基础教程
阿里云弹性网络接口技术的容器网络基础教程
|
3月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程,包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
BootStrap在Vue中的安装使用详细教程
|
2月前
|
Cloud Native 持续交付 Docker
云原生技术实践:Docker容器化部署教程
【9月更文挑战第4天】本文将引导你了解如何利用Docker这一云原生技术的核心工具,实现应用的容器化部署。文章不仅提供了详细的步骤和代码示例,还深入探讨了云原生技术背后的哲学,帮助你理解为何容器化在现代软件开发中变得如此重要,并指导你如何在实际操作中运用这些知识。
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
Bootstrap 5 保姆级教程(十一):模态框 & 提示框