引导你的网页 2 - 布局 Responsively

分享于 

23分钟阅读

Web开发

  繁體

序曲

继续从引导你的网页 1 - 准备好,我们离开这里。 选择了 Bootstrap的容器,现在可以注意设计适应于手机。平板电脑。笔记本 和桌面等不同类型的设备。 因此,你必须在 Bootstrap 系统的网格上有一个好的grip。

介绍 Bootstrap 网格

在上一篇文章中打开你创建的" bootstrap_starter_template.html",或者在这里下载它,用一个新名称保存它,例如" bootstrap_grid.html",然后将以下代码插入 <body> 部分:

<divclass="container"><divstyle="background-color:#CFF">content 1</div><divstyle="background-color:#9FC">content 2</div></div>

无论在下面的图中,在浏览器上的两个内部 <div> 都将垂直堆叠,如下面图所示或者在第2 行演示 :

Figure 1 : Default Grid-less Layout图 1: 默认的网格布局

如图 1所示的网格布局更适合于非常小的移动电话屏幕。 对于大型设备,你可能希望将列并排放置在页面的单个行中。 让我们看看如何使用 Bootstrap 系统的网格实现这一点

Bootstrap 通过响应性的移动第一网格系统创建页面布局,它的中包含保存实际网页内容的<div> 标记的水平行或者单元格。

在它的基本形式中,Bootstrap 网格中的每行都可以在页面上保持across个单独的列。 可以将多个单个列组合在一起以创建更宽的列。

十二个柱网轴线

在 Bootstrap 中的基本网格允许在一行中达到,列,我适当地创建了"十二个柱网轴线"。 按以下步骤操作:

  • 将两个 <div> 封装在一个包含 <div class="row">
  • 分别将两个 <div> 值分别为 12和,表示每一个列的数量。 这些数字必须加到 twelve,这是页面水平允许的最大列数。
  • 指定最小类型的设备,表示平板电脑表示为 Bootstrap,你希望它们在屏幕上单一显示。

生成的代码如下所示:

<divclass="container"><divclass="row"><divclass="col-sm-4"style="background-color:#CFF">content 1</div><divclass="col-sm-8"style="background-color:#9FC">content 2</div></div></div>

class="col-sm-4"class="col-sm-8" 类将移动电话的两种内部 <div> 转换为平板上的full宽度 single,这是由代表"小"的breakpoint宽度 single and breakpoint breakpoint transformation。

在 device,换句话说,,browsers,browsers,browsers,browsers,browsers,browsers,browsers,browsers,browsers,browsers,browsers,browsers,on,on,on,on,on。

Figure 2 : Single-column Vertical Stack on Mobile Phones图 2: 移动电话上的单列垂直堆叠

另一方面,对于平板或者更大设备,两个 <div> 将分别显示在页面 across 4到 8的比例,如下面的图 3所示,超过table宽的表尺寸。

Figure 3 : Two-column Horizontal Layout on Tablets and Larger Devices图 3: 平板电脑和大型设备上的两列水平布局

,example Bootstrap 类 four 换句话说,.col-sm-* four在大型设备的扩展屏幕上,创建了一个网页布局,该布局显示为两个 <div>的垂直列宽,并将它的转换为整个页面。 其他三个网格类是 .col-xs-*.col-md-*.col-lg-*。 each grid .col constants- prefix followed xs separated md columns和 lg的前缀开始,并使用连字符( 如下面表 1所示)的跨区列的数量来表示。

表 1: Bootstrap ClassesPREFIX响应断点的网格SPANNED列
.col
-
xs
-
112
sm
md
lg

table 1,响应断点参数采用以下四个常量之一:

  • xs 指的是"Xtreme小"尺寸小于 768px的设备,例如移动电话。
  • sm 是指"小"尺寸至少为 768px的设备,例如平板电脑和大型设备。
  • md 指的是"介质"大小至少为 992px的设备,例如桌面和大型设备。
  • lg 指的是"大"大小至少为 1200px 个宽的设备,例如大型桌面。

spanned列参数的数目接受从 1到 12的整数值。

此类网格类对创建响应式布局的影响如下所述:

.col-xs-* 在( xs ) 尺寸小于 768px的设备( 如移动电话和大型设备) 上,创建一个跨 * 数量的<div>,这一。 实际上,它适用于任何大小的设备。 .col-sm-* 创建了一个 <div>,它跨越了至少 768px 宽的"小"( sm ) 尺寸设备( 如平板电脑和大型设备)的* 数量。 .col-md-* 创建一个 <div>,它跨越至少 992px 个大范围( 如桌面和大型设备)的"介质"( md ) 大小的设备上的* 数量。 .col-lg-* 创建了一个 <div>,它跨越了"大"( lg ) 大小的设备( 例如更大的桌面)的( ) 大小的设备上的* 数。

Seeing相信,在网页中的单独行中包含四个span列,如下面所示,并可以用于下载

<divclass="container"><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-xs-1"style="background-color:#CFF">.col-xs-1</div><divclass="col-xs-1"style="background-color:#9FC">.col-xs-1</div><divclass="col-xs-1"style="background-color:#CFF">.col-xs-1</div><divclass="col-xs-1"style="background-color:#9FC">.col-xs-1</div><divclass="col-xs-1"style="background-color:#CFF">.col-xs-1</div><divclass="col-xs-1"style="background-color:#9FC">.col-xs-1</div><divclass="col-xs-1"style="background-color:#CFF">.col-xs-1</div><divclass="col-xs-1"style="background-color:#9FC">.col-xs-1</div><divclass="col-xs-1"style="background-color:#CFF">.col-xs-1</div><divclass="col-xs-1"style="background-color:#9FC">.col-xs-1</div><divclass="col-xs-1"style="background-color:#CFF">.col-xs-1</div><divclass="col-xs-1"style="background-color:#9FC">.col-xs-1</div></div><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-sm-1"style="background-color:#CFF">.col-sm-1</div><divclass="col-sm-1"style="background-color:#9FC">.col-sm-1</div><divclass="col-sm-1"style="background-color:#CFF">.col-sm-1</div><divclass="col-sm-1"style="background-color:#9FC">.col-sm-1</div><divclass="col-sm-1"style="background-color:#CFF">.col-sm-1</div><divclass="col-sm-1"style="background-color:#9FC">.col-sm-1</div><divclass="col-sm-1"style="background-color:#CFF">.col-sm-1</div><divclass="col-sm-1"style="background-color:#9FC">.col-sm-1</div><divclass="col-sm-1"style="background-color:#CFF">.col-sm-1</div><divclass="col-sm-1"style="background-color:#9FC">.col-sm-1</div><divclass="col-sm-1"style="background-color:#CFF">.col-sm-1</div><divclass="col-sm-1"style="background-color:#9FC">.col-sm-1</div></div><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-md-1"style="background-color:#CFF">.col-md-1</div><divclass="col-md-1"style="background-color:#9FC">.col-md-1</div><divclass="col-md-1"style="background-color:#CFF">.col-md-1</div><divclass="col-md-1"style="background-color:#9FC">.col-md-1</div><divclass="col-md-1"style="background-color:#CFF">.col-md-1</div><divclass="col-md-1"style="background-color:#9FC">.col-md-1</div><divclass="col-md-1"style="background-color:#CFF">.col-md-1</div><divclass="col-md-1"style="background-color:#9FC">.col-md-1</div><divclass="col-md-1"style="background-color:#CFF">.col-md-1</div><divclass="col-md-1"style="background-color:#9FC">.col-md-1</div><divclass="col-md-1"style="background-color:#CFF">.col-md-1</div><divclass="col-md-1"style="background-color:#9FC">.col-md-1</div></div><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-lg-1"style="background-color:#CFF">.col-lg-1</div><divclass="col-lg-1"style="background-color:#9FC">.col-lg-1</div><divclass="col-lg-1"style="background-color:#CFF">.col-lg-1</div><divclass="col-lg-1"style="background-color:#9FC">.col-lg-1</div><divclass="col-lg-1"style="background-color:#CFF">.col-lg-1</div><divclass="col-lg-1"style="background-color:#9FC">.col-lg-1</div><divclass="col-lg-1"style="background-color:#CFF">.col-lg-1</div><divclass="col-lg-1"style="background-color:#9FC">.col-lg-1</div><divclass="col-lg-1"style="background-color:#CFF">.col-lg-1</div><divclass="col-lg-1"style="background-color:#9FC">.col-lg-1</div><divclass="col-lg-1"style="background-color:#CFF">.col-lg-1</div><divclass="col-lg-1"style="background-color:#9FC">.col-lg-1</div></div></div>

在浏览器或者访问该浏览器时,将它的启动,在第页大小,然后调整浏览器大小,模拟移动电话,平板电脑,桌面和桌面,如图 4所示,将相应的行设置为屏幕大小,如图8 所示。 注意,较低断点网格类( 如 .col-xs-* )的布局将向上扩展到较大的设备。

Figure 4 : Xtreme Small (xs) Screen of Mobile Phone图 4: 手机的Xtreme小( xs ) 屏幕Figure 5 : Small (sm) Screen of Tablets 图 5: 平板电脑的小型( sm ) 屏幕 Figure 6 : Medium (md) Screen of Desktops图 6: 桌面的medium ( md ) 屏幕Figure 7 : Large (lg) Screen of Larger Desktops 图 7: 大型桌面的大型( lg ) 屏幕

你已经了解到:

注:

Bootstrap 类的网格首先是移动的,并且总是向上扩展。 换句话说,网格类会影响屏幕宽度等于或者大于它的响应断点的设备。 因此,如果要为 sm和大小的设备设置相同的宽度,你只需要指定 .col-sm-*

混合网格

可以为网格列分配多个网格类,以创建高度响应的布局,这些布局在多个断点处进行更改。 每个网格类将会向上影响响应断点的布局,直到遇到较大响应断点的下一个网格类。

试用下面的代码,该代码同样适用于下载插件:

<divclass="container"><divclass="row"><divclass="col-sm-3 col-md-6 col-lg-4"style="background-color:#CFF"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p></div><divclass="col-sm-9 col-md-6 col-lg-8"style="background-color:#9FC"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p></div></div></div>

将该页面放在浏览器上,或者在 line view查看它,然后调整浏览器大小,使浏览器模拟手机屏幕,平板电脑,桌面和桌面,如图 8所示,在每个断点中模拟屏幕,如图7 所示。

Figure 9 : Small (sm) Screen 图 9: 小( sm ) 屏幕 Figure 10 : Medium (md) Screen图 10: medium ( md ) 屏幕 Figure 11 : Large (lg) Screen 图 11: 大型( lg ) 屏幕

你已经了解到:

注:

当网格类将放大并影响屏幕宽度等于或者大于它的响应断点的设备时,它们覆盖面向较小设备的网格类。

到目前为止,你遇到的是响应网格布局,总是转换为固定数量的列,尽管在一行中的跨列列总数是1,因为这些列的扩展。 可以在不同响应断点下提供不同数量的列的布局? 这将带我们到环绕列网格的主题。 请阅读。

环绕柱网轴线

在不同响应断点处有不同的列数,你必须为网格列分配多个网格类,这将不可避免地导致在某些点超过 12列的总数。

假设你希望在手机上使用 2-column 布局,可以在较大的设备上扩展到 4-column 布局,你可以尝试以下代码,或者在 line line下载 :

<divclass="container"><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-xs-6 col-sm-3"style="background-color:#0CC;">Column 1: col-xs-6 col-sm-3<br>resize the browser and be surprised!</div><divclass="col-xs-6 col-sm-3"style="background-color:#0CF;">Column 2: col-xs-6 col-sm-3</div><divclass="col-xs-6 col-sm-3"style="background-color:#9C0;">Column 3: col-xs-6 col-sm-3</div><divclass="col-xs-6 col-sm-3"style="background-color:#F90;">Column 4: col-xs-6 col-sm-3</div></div></div>

It在 ,sized devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices devices

Figure 12 : four Equal-Width Columns on sm Sized and Larger Devices图 12: sm大小和大型设备上的四个等宽列

但是,在 xs xs设备中,单个行的跨区列总数已经超过 12. 如果你想在下面的一行中添加额外的列,那么这会导致意想不到的结果,如下面的图 13所示,或者在 / sized的设备上查看它。

Figure 13 : Layout went Awry on xs Sized Devices图 13: x 尺寸设备上的布局出错

x 设备上的布局出错 ! 如何修复.clearfix 到救援? ! 请参见下面的修改代码,或者在第行下载 :

<divclass="col-xs-6 col-sm-3"style="background-color:#0CC;">Column 1: col-xs-6 col-sm-3<br>resize the browser and be surprised!</div><divclass="col-xs-6 col-sm-3"style="background-color:#0CF;">Column 2: col-xs-6 col-sm-3</div><!-- Add clearfix for desired viewport --><divclass="clearfix visible-xs"></div><divclass="col-xs-6 col-sm-3"style="background-color:#9C0;">Column 3: col-xs-6 col-sm-3</div><divclass="col-xs-6 col-sm-3"style="background-color:#F90;">Column 4: col-xs-6 col-sm-3</div>

上代码在本例中添加了 desired clearfix ,你将解决问题,如图 14所示,或者在第行查看它的:

Figure 14 : Properly Wrapped Column Grid on xs Sized Devices图 14: 在x 大小的设备上正确地填充柱网轴线

偏移列

可以通过任意响应断点的* 数目将网格列移动到右侧,使用 Bootstrap 偏移量 classes- .col-xs-offset-*.col-sm-offset-*.col-md-offset-*.col-lg-offset-* -that。 这里数量可以创建一个空白列,该列跨越 * 数目的列和 上面 中的列。

请尝试以下代码或者在 line下载 :

<divclass="container-fluid"><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-xs-4"style="background-color:#0CC;">col-xs-4</div><divclass="col-xs-3"style="background-color:#0CF;">col-xs-3</div><divclass="col-xs-5"style="background-color:#0CC;">col-xs-5</div></div><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-xs-4"style="background-color:#0CC;">col-xs-4</div><divclass="col-xs-5 col-xs-offset-3"style="background-color:#0CF;">col-xs-5 col-xs-offset-3</div></div></div>

如图 15所示,在浏览器上启动它,或者在线查看 第1 行显示第2 个网格列,第2 行与第2 个网格列的比例为1: 第2 行将第二个网格列与第二个网格列( 导致第二个网格列移动到右侧的第2 个列) 显示。

Figure 15 : Bootstrap's Column Offset图 15: Bootstrap 偏移列

对于采用多个网格类的柱网轴线,较低断点偏移类的效果将增大并影响较高断点网格类的布局。 这可能导致意外结果。 按照下面的代码将 .col-sm-6 添加到前面的代码中,或者在 line上下载 :

<divclass="container-fluid"><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-xs-4 col-sm-6"style="background-color:#0CC;">col-xs-4 col-sm-6</div><divclass="col-xs-5 col-xs-offset-3 col-sm-6"style="background-color:#0CF;">col-xs-5 col-xs-offset-3 col-sm-6</div></div></div>

在浏览器上启动它或者在线查看 注意:在浏览器调整到下一行的大小时,将按如下图 16所示的方式将第二个列包装到下一行,从而使第2 列的大小更高。

Figure 16 : Column Offset went Awry图 16: 列偏移出错

要设置正确,只需在 .col-sm-offset-0 断点处添加一个带有零跨距列的偏移类即可替代这里示例中的任何较低的断点偏移量类。 请尝试下面的代码,或者在线下载

<divclass="container-fluid"><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-xs-4 col-sm-6"style="background-color:#0CC;">col-xs-4 col-sm-6</div><divclass="col-xs-5 col-xs-offset-3 col-sm-6 col-sm-offset-0"style="background-color:#0CF;">col-xs-5 col-xs-offset-3 col-sm-6 col-sm-offset-0</div></div></div>

上代码将防止列偏移传播到 sm breakpoint,从而允许在 sm sized或者更大设备上呈现计划的2列宽度布局,如图 17所示,或者在第2 行查看它:

Figure 17 : Proper Column Offset图 17: 适当的列偏移

重排序-列

你可以在任何响应断点中轻松地更改网格列的顺序,并以和 .col-<breakpoint>-pull-*的形式拉入modifier类。 请尝试以下代码或者在 line下载 :

<divclass="container-fluid"><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-sm-4 col-md-push-8"style="background-color:#CFF">col-sm-4 col-md-push-8</div><divclass="col-sm-8 col-md-pull-4"style="background-color:#9FC">col-sm-8 col-md-pull-4</div></div></div>

在浏览器上启动它或者在线查看 如图 18所示,两个网格列显示在 sm大小的设备上,但在 .col-md-push-8 大小和较大设备上按和 .col-md-pull-4的大小排序,如图所示。

Figure 19 : Layout on md Sized and Larger Devices 图1: md尺寸和较大设备的布局

嵌套列

只要在网格列中添加一个新的网格类,就可以创建嵌套列布局,如下面的代码中所示的网格列或者在第行下载它

<divclass="container-fluid"><divclass="row"style="margin-top:1%;margin-bottom:1%"><divclass="col-sm-12"style="background-color:#CFF"> Level 1 Top
 <divclass="row"><divclass="col-sm-4"style="background-color:#9C0">Lever 2: col-sm-4</div><divclass="col-sm-8"style="background-color:#F90">Lever 2: col-sm-8</div></div> Level 1 Bottom
 </div></div></div>

在浏览器上启动它或者在线查看 ,它将如图 20所示,在sm大小和较大的设备上显示。

Figure 20 : Nested Columns图 20: 嵌套列

下一个

我们已经得到了一个很好的Bootstrap,移动第一网格系统的响应,现在是时候看看网络内容的样式样式。 下一次出货的情况是什么? 我们来看看吧,让我们暂停一下。

博客的Peter代码中首次展示了的网页 2 - 布局Responsively的


相关文章