多用途网站模板. 如何使用网格(列)代码

• col 表示它实际上是包含到行中的“列”，

• X 定义设备的类型(xs/sm/md/lg)

• and Y 表示网格列数(1-12).

让我们仔细看看这个.

为响应式设备设置内容布局

首先，我们应该指定要定义的设备类型 layout For -可以有大的桌面或小的移动屏幕等. 以在代码中设置确切的设备类型, 在类名中使用以下后缀(而不是XX):

• xs – for extra-small 屏幕宽度，如普通手机在竖屏模式;

• sm – for small 设备，如横向模式的普通手机或智能手机屏幕;

• md – for medium-sized 设备，如平板电脑;

• lg – for large 设备，如任何台式电脑;

所以你的类看起来就像coll -sm-Y, coll -md-Y, coll -Y等等(其中Y是一个数字).

确保为您的内容指定所有4个color - xx类，以使其在所有设备上正确显示.

为响应式设备定义内容宽度

接下来，我们必须定义每个元素的确切宽度. 为此，在类名中使用从1到12的数字而不是Y. 因此，要创建一个全宽行，其中包含一些文本，使用12. 一页的一半将在班级名称中加上6，以此类推.

Try it in action

现在让我们来看一些实际的例子. 我们将创建一行，其中有两列相等, 在台式机和平板电脑上，每个栏目将占据页面宽度的一半, 但要在移动设备上实现全屏. 要做到这一点，我们需要以下代码:

	

		

			
Our first example. Column 1
			
Welcome to our wonderful world. 我们真诚地希望每一位进入我们网站的用户都能找到他/她正在寻找的东西. 具有激活帐户和新的登录小部件的高级功能, 你一定会有一个伟大的经验，使用我们的网页. 它会告诉你很多og体育公司有趣的事情, 其产品和服务, 高度专业的员工和满意的客户. 我们的网站设计和导航是经过深思熟虑的.
		
	
	
	

		

			
Our first example. Column 2
			
Welcome to our wonderful world. 我们真诚地希望每一位进入我们网站的用户都能找到他/她正在寻找的东西. 具有激活帐户和新的登录小部件的高级功能, 你一定会有一个伟大的经验，使用我们的网页. 它会告诉你很多og体育公司有趣的事情, 其产品和服务, 高度专业的员工和满意的客户. 我们的网站设计和导航是经过深思熟虑的.
		
	

On the live website 它将以如下方式显示:

• Desktop (since we have col-lg-6 set, each column will take 6/12 – half of page on large devices):

  

• 移动设备(因为我们有) col-sm-12 set, each column will take 12/12 – full page on small devices):

  

您的模板可能包含具有现成代码示例的页面-查找 Grid system 页，只需将行复制到您需要的页面(请参阅下面的示例). 只需将文本内容替换为您的内容即可.

的更多信息和示例 Bootstrap 网格可以在 官方框架网站. 您可以使用代码来获得结构化的代码 layout 因为你的网页设计需要(1).e.(将行一排接一排地嵌套)，并使其完全满足您的需求. Wish you good luck!