初学者linux基础知识_初学者基础：网格系统

初学者linux基础知识

在本次基础框架课程的开篇中 ，我们了解了如何使用该框架，该框架可以做什么以及如何构建自定义版本。 在这一部分中，我们将详细介绍网格系统，并在此过程中演示一些示例。 我们还将稍作调整，看看Orbit JavaScript Slider插件 ； 一个很棒的滑块，用于显示各种内容。

---

网格系统

我们仅对Foundation中的网格使用一个主要断点来移动768px以上宽屏的布局。

Foundation是支持移动优先方法的现代框架。 这意味着最起码的最低代码和资产将首先加载，以帮助提高页面渲染速度。 与大多数现代框架一样，Foundation具有充分的响应能力。 与大多数情况不同，它仅利用一个转折点进行结构更改。 断点定义了将大网格应用到的视口宽度，该宽度发生在768px。

网格系统本身实际上包括三个部分： 桌面网格，移动网格和块网格。 因为基础首先是移动的，所以让我们从移动网格开始。

---

小网格

	

		
This is Foundation
	

上面的代码由三个重要的类组成： 第一个是保存行列的“行”类，与电子表格中的行包含单元格列的方式大致相同。 在此演示中，我们使用十二列网格，因此twelve是一行中可以包含的最大列数。 话说回来，如果您需要更多，Foundation支持多达16列，您可以在自定义构建表单中选择它们。

此处定义列的类为small-12 ，更改此类中的数字将定义所述列的宽度。 单独使用“ small-12”仅定义宽度。 为了实际创建列，我们需要将其与“ columns”类配对。 这三类是网格系统的基础。

十分简单，上面的标记表明存在一行，并且div将占用十二列的空间（宽度的100％）。 在十二列中是我们的内容。 让我们看一个稍微复杂一些的版本。

	

		
This is a sidebar
	
	

		
This is the content area
	

在此代码中，我们可以看到有两个带有“ columns”类的div。 每一个都与一个类（例如“ small-4”）结合起来以指定特定大小。 然后，Foundation将这些列彼此并排排列，而不是像在普通HTML文档流中那样在顶部排列。 我们的两列分别占据四列的宽度和八列。 这两列总共有十二列。 “ small-4”约为车身宽度的33.3％，“ small-8”约为车身宽度的66.6％。

在这里要意识到的重要一点是，这些div几乎可以无限嵌套。 这提供了极大的灵活性，例如：

	

		
This is a sidebar
		

			

				
#1
			
			

				
A post title
			
			

				Go
			
		
	
	

		
This is the content area
	

您可以看到，我们已经在一行中使用一行，一行，一行来添加了一些内容，这一次我们利用了三列大小不同的列。 好东西吗？ 好了，现在是时候投入一些大屏幕代码来充分利用网格系统了。

---

大网格

	

		
This is a sidebar
	
	

		
This is the content area
	

在这里，我们为large-3列large-3和large-9列large-9每列添加了一个额外的类。 这告诉Foundation，在较大的屏幕上查看站点时，应将侧边栏的宽度从3-3％的small-4更改为3-3％的large-3 ，大约等于机体宽度的25％。 因此，我们的主要区域能够增长，从而为内容提供了更多空间。 这是一个简单的示例，但是当要针对不同的屏幕尺寸重新布置布局时，它非常有用。

虽然我们正在研究网格系统，但值得一提的是，通过使用large-centered和small-centered您可以快速轻松地将列small-centered ，尽管只有在行中只有一列的情况下才可以这样做。 您还可以使用push和pull类来操纵元素的顺序。

	
3
	
9, last

这需要第二个div，通常在第一个div 之后显示，然后将其拉到前面，同时推动第一个div出现。 因此，在大型显示器上，您可以在左侧找到列表，在右侧显示内容，但在小型显示器上，可以将其推到下方。

---

块状网格

涵盖了网格系统的来龙去脉之后，我们可以看一下块状网格，该块状网格用于使列表元素均匀分布，无论屏幕大小如何。 这些对于被阻止的内容（例如由应用程序生成的内容）是理想的，因为它们不需要行甚至列都可以正确显示。 如果您打算在台式机和移动设备上使用相同的布局，则只需使用small-block-grid-#类。

对于我们之前谈到的网格，情况也是如此。 只需使用small-12 ，而不是使用small-12和large-12 small-12 。 简单。

到此，基金会必须提供基本形式的网格系统。 请记住，一旦屏幕宽度达到主要中断点，小网格将变为大网格。 使用较小的网格来定位较小的设备，使用较大的网格来定位通常是台式机和大屏幕的设备。

---

轨道插件

现在，通过介绍Foundation的许多有用插件之一，我们将稍作调整。 轨道。

这个方便的插件可以用作滑块，使您可以在图像，视频或常规HTML内容中滑动。 通过简单的标记，很容易掌握，如果使用得当，这真是令人赏心悦目。

	

		
		
...
	
	

		
		
...
	
	

		
		
...
	

轨道使用列表结构； 每个列表项都显示为幻灯片。 在这里，除了常规的图像标签之外，我们的列表项还包含一个带有orbit-caption类的div，允许我们在每个图像上放置一个标题。 Orbit接受此代码并添加更多标记以使事情正常进行。 它还包括许多用于显示分页，控件甚至计时器的选项。

看一些您可以在Orbit中更改的参数示例：

timer_speed: 10000,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true

这些包括速度，项目符号分页以及可以在小屏幕上堆叠的选项。 重要的是要注意，这些是在初始化时传递的，因此您需要使用标准的$(document).foundation(); ，位于下载内容中index.html的底部：

然后传递轨道选项。

除了此处显示的选项之外，您还可以将类添加到插件产生的所有元素中。 这些额外的选项（以及更多）可以在Foundation docs中找到。

注意：您的Foundation下载将包含您选择的所有JavaScript片段，并被编译成一个缩小的文件。 这是在index.html的底部引用的，但是如果您愿意，也可以选择取消注释单个JavaScript文件：

---

有用的工具

是否想立即使用Foundation而不下载它？ 还是您想要一个干净的环境来测试新想法？ 然后查看这个方便的jsfiddle。 它使用Foundation的最新版本，并包含所有组件。

---

接下来的是

在基础指南的这一部分中，我们介绍了网格系统，并简要介绍了Orbit插件。 在下一部分中，我们将介绍导航和section插件，以及另一个有用的工具。

翻译自: https://webdesign.tutsplus.com/articles/foundation-for-beginners-the-grid-system--webdesign-12438

初学者linux基础知识