在之前的课中
我们学习了响应设计和 bootstrap 网格系统
我们已经看到了 bootstrap 网格如何允许我们设计响应性的网站
现在是我们进行下一项练习的时候了
我们将使用我们在之前的练习中创建的 index.html
并应用 bootstrap 网格类来使其响应
在浏览器中快速查看我们的网页, 我们看到,
虽然字体改进了一点, 但仍然很糟糕,
我们现在使用的是 bootstrap 的默认字体
现在让我们尝试将 bootstrap 网格类应用于 index.html 以改进其布局
进入 index.html 页面
让我迅速提请您注意这一行
我们已经在前面的练习中已经包含
我提到过这行
在我们讨论 bootstrap 网格系统时
在这里, 我们看到我们已经指定了一个视图端口和内容的 meta 标签,
宽度是设备宽度,
初始规模为 1, shrink-to-fit 为 no
所以这个元标签允许我们使
我们的网页通过查看端口来响应
向前迈进一步
我们要向下滚动到该 index.html 的 body,
然后查找第一个 div, 它正好在头标签下面,
在这个 div 上, 你要应用 container 类
我们已经在上一堂课了解了 container 类
所以一旦我们应用了 container 类,
就看一下我们的网页, 我们看到
部分内容已经改变
看看这里和下面的内容之间的差异
现在下面的内容,
位于首页的页脚中.而此内容位于页眉中
但中间的内容是我们网页的实际内容,
它在我们应用 container 的 div 内
因此, 应用 container 类, 您可以立即看到
我们的内容所在的页面的宽度现在已经
收缩, 在两边有一些额外的空间,
这个 container 宽度是一个固定大小的 container,
我们的内容将被固定在这个特定的宽度上
屏幕两边有足够留白
让我们同时对页眉和页脚应用相同的 container 类,
然后查看内容的改变
回到我们的网页
我现在要做的是对这里的内部内容,
container 内部的 div,
我将对第一个 div
应用 row class 这个类,
我将简单地复制这个
我要对第二个 进行相同的操作
然后向下滚动到第三个 div,
我也在这里应用 row 类
所以现在, 这个最外层的 container 类中的内容,
现在分为三部分,
所以在这里面的东西是一部分
在这里面的东西
是第二部分, 在这里面的是第三部分
稍后我们将对此应用 column 类
现在让我们移动到主页 body 中的 header
我将要对其设置 class="jumbotron"
jumbotron 允许您将 jumbotron
中的内容与页面的其余部分分开
当我们查看网页时, 我们将很快看到结果
现在, 对这个 header 中的 div,
我要对它应用 container 类,
所以, 无论是里面是什么内容, 都将
受到 container 宽度的限制
同样地, 向下移动到页脚,
在页脚中,
对其中的第一个 div
我将要设置 class="container"
然后在这个 div 里面
我将要设置 class="row"
对里面的 div
所以这个 div 会一路带我们到下面这个 div
然后下一个 div
我也将设置 class="row"
所以现在我的页脚包含 2 rows,
我们一会儿将使用 column 类
来改变内容样式
回到 header
我将在这里将 row 类应用于 container div 中的第二个 div
所以这个 div 匹配这个,
将在页眉中仅有 1 row
我们先看下在网页上呈现的结果
进入我们的网页
你可以看到 header 内容现在已和
其余内容区分开来, 在顶部灰色背景中
但它的内容现在与下面的内容对齐
这是使用 container 的结果
移动到页脚,
你可以看到页脚内容也与 container 对齐
但是这个页面看起来还不是很好,
现在, 让我们继续对内部 divs 应用 column 类
返回到 index.html 页,
我们现在开始应用 column 类
所以前往 header, 到 jumbotron 内第二个内部 div
让我添加 class="col-12, col-sm-6"
这里, 第一个 div 的内容
对额外小尺寸的屏幕将占据整行,
其他则占据一行的一半，原因是
我们用 col-sm-6 表示小到超大屏幕尺寸
现在, 同样对于第二个 div ,
虽然它不包含任何内容,
我将在这里定义类为 "col-12 col-sm"
因此, 请注意, 在这里通过指定 col-12,
我明确地指出对于额外的小屏幕尺寸, 无论在这个 div 里面内容是什么
都将堆积在这里的内容下面
对小到额外大的屏幕尺寸,
此内容将占用行中
剩余的的列
所以在这种情况下, 因为 6 列被这个内容占据,
它将占用剩余的 6 列
向下移动到这里表示内容的 rows,
对于这里的内容,
第一个内容,
这是一个标签,
我将要使用这些类,
col-12, col-sm-4, col-md-3
因此, 对于额外的小屏幕尺寸,
它将占据整行, 对小屏幕尺寸,
它将占据整列,
对中等到超大的屏幕尺寸,
它将占据该行中的三列
剩下的部分将被下面的内容占占据
所以对于它，我将设置 class="col"
表明在额外的小屏幕尺寸
这将堆积在这里的内容下面
然后我会给它 col-sm,
这意味着它将占据余下的 8 列,
因为 4 列已经被占据,
然后我会给它 col-md,
这意味着它将占据
余下的 9 列, 因为 3 列已经
在中等到额外大屏幕大小 被以上内容占据
现在, 我已经定义了第一个 row 的内容,
我将在这里采用相同的操作,
然后将其应用到第二个 row,
还有第三个 row
同样, 我要复制这一个, 然后应用相同的
这下面的 div
现在我们已经配置了 header 和表示内容的部分
现在让我们向下移动到 footer
在 footer 中, 你会注意到此 div 内部包含三个 divs,
对于内部的三个 divs,
我将要应用相应的 column 类
对于第一个,
包含构成本网站一部分的各种页面链接,
我将要应用一个 column 类
col-4, col-sm-2
意思是对于额外的小屏幕尺寸,
它将占据 4 列，对于小到特大屏幕尺寸,
它只会占据 2 列
然后对于第二个,
第二个 div, 我将应用 class="col-7"
请注意我在这里用了 4, 然后在这里用了 7,
所以总共占用了 11 列
我留出了 1 列
我稍后回来设置一个 offset 来处理这一额外的列
这是 7 列,
然后是 col-sm-5
所以这是 2 加 5, 等于7
我还剩下 5 列
我可以给第三个 div 使用
对额外小的屏幕尺寸,
这两个内容将并排放置,
然后这个 div 包含链接到
社交媒体网站将在下面独占一行
但是对于小到超大屏幕尺寸,
第一个 div 将占据 2 列,
第二个 div 将占据 5 列, 其余的将
被这里的社交媒体链接占据
所以对于第三个
我将要设置
class="col-12 col-sm-4"
所以 col-12, col-sm-4 意味着这将
在先前的内容后面占据 12 列
在额外的小屏幕尺寸
但对于小到特大的屏幕尺寸, 它将占据 4 列
所以在这里我们是 4 加 5,
9 加 2, 11
所以对于小到特大的屏幕尺寸，仍有 1 列剩余
所以这是我将如何对它应用 column 类
现在, 我们在这下面还有一项, 它包含了版权信息
我将要设置 class="col-auto"
这意味着这个内容将占据
仅供内容所需的列
稍后你会看到, 我会在将这一内容置于屏幕中心
使用另一个 bootstrap CSS 类
我们会在下一个练习中提到
因此, 我们已经将各种 column 类应用于 header
内容和 footer
现在是一个好时机来保存修改
看一眼更新的 index.HTML 页面
看一眼我们的 index.HTML 页面,
你会注意到 header 中, 即 Jumbotron
内容现在仅占了屏幕的一半
此行的另一半屏幕现在已留空
进入内容行,
您会看到左侧的标签占据
3 或 4 列, 取决于屏幕大小,
其余的被余下内容占据
所以在这里我们有一行,
第二行, 第三行
然后在这里的页脚, 你可以看到链接在左侧,
地址在中间
社交媒体链接在右边
这是在一个中等大小的屏幕上
现在, 如果你想看到它在额外小或小屏幕上的样子
如果你使用的是谷歌浏览器
它自带开发工具, 你可以
通过单击视图开发工具来打开,
当开发工具出现时,
你会注意到 (让我缩小这里的尺寸)
你会注意到这里的小窗口
点击它将打开对网站的响应视图
你可以看到这个相同的网页在 pixel 上的视图,
在纵向模式下是 411x731
对应一个额外的小屏幕尺寸
你可以看到内容的布局
可以看到 Jumbotron 内容在那里
剩下的部分在下面
然后下到页脚
在页脚中, 你可以看到链接和地址并排
缩小屏幕尺寸让我们看到页脚是如何呈现的
剩下的部分, 链接在左边
地址在右边
社交媒体链接在下面自成一行
版权在最底部
这是一个有趣的视图, 让我们看到 额外小的屏幕尺寸上的呈现方式
回到我们的代码,
我将要应用 order 和 offset 类
使得此内容以稍微不同的方式显示
去到这里的内容行,
对于这里包含内容的两个 divs,
我将要设置
class="order-sm-last"
然后对于下面这一项 我将设置 order-sm-first
也就是说, 当显示此内容时,
此内容将被拉到屏幕的左侧, 然后
这一列将被推到屏幕的右侧
这一列将被分配到右侧, 这一列将被分配到左侧
正如我在前面的课程中所解释的 order 命令
第二行, 同样地,
我将让它保持原样，但第三行，我将应用
相同的 order 类
我现在来到第三行这里,
对它设置 order-sm-last
然后对这里设置 order-sm-first
同样地, 这一行会重新排序
使得这一内容显示在
左侧而这一内容显示在右侧
这只是以更有趣的方式安排内容
现在向下移到页脚,
我要在这里设置一个 offset
请注意我提到过这两列将占据 4 加 7, 11
所以 1 列是剩余的
我将要对它设置 class="offset-1"
这意味着这个 div 上的内容将被右推 1 列
类似地, 因为我使用 offset-1
这将被应用到额外小一直到额外大的屏幕尺寸
使用 offset 类就说到这里
现在既然我们已经做了修改,
让我们保存更改, 然后去看看浏览器中我们的网页
回到浏览器中,
你看到 header 和以前一样
但在第一个内容行中,
你可以看到这一内容已被推到
左侧，标签被推到了右侧
第二行不同，它保持以前的模样
但对于第三行, 你会看到, 这一内容
被推到了右边, 这一内容被推到了左边
这是使用的 order-sm-last 和 order-sm-first 的缘故
现在去页脚,
你可以看到, 此处第一个 div 中的内容 已被向右推了 1 列
你可以看到这里有一列空白,
这一列被向右推, 其余的列也做了相应调整
因此, 我们完成了
对我们这门课 index.html 的修改
如此我们完成了这个训练
在本练习中, 我们学习了 container 的使用, row,
和 column 类, 来使我们的网页设计得稍微好一点
在紧接着的第二部分的练习中,
我们将添加更多改变，尝试改进网页的呈现方式
我还是不满意
显然, 还有改进的余地
这或许是一个好时机 来进行一个 git commit
信息为 Bootstrap Grid Part One