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

最新推荐文章于 2025-12-22 15:57:21 发布

翻译最新推荐文章于 2025-12-22 15:57:21 发布 · 300 阅读

文章标签：

#java #javascript #linux #vue #html #ViewUI

初学者linux基础知识

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

网格系统

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

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

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

小网格

<div class="row">
	<div class="small-12 columns">
		<h2>This is Foundation</h2>
	</div>
</div>

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

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

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

<div class="row">
	<div class="small-4 columns">
		<h2>This is a sidebar</h2>
	</div>
	<div class="small-8 columns">
		<h2>This is the content area</h2>
	</div>
</div>

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

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

<div class="row">
	<div class="small-4 columns">
		<h2>This is a sidebar</h2>
		<div class="row">
			<div class="small-1 columns">
				<h6>#1</h6>
			</div>
			<div class="small-9 columns">
				<p>A post title</p>
			</div>
			<div class="small-2 columns">
				<button>Go</button>
			</div>
		</div>
	</div>
	<div class="small-8 columns">
		<h2>This is the content area</h2>
	</div>
</div>

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

大网格

<div class="row">
	<div class="small-4 large-3 columns">
		<h2>This is a sidebar</h2>
	</div>
	<div class="small-8 large-9 columns">
		<h2>This is the content area</h2>
	</div>
</div>

在这里，我们为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类来操纵元素的顺序。

<div class="row">
	<div class="small-3 push-9 columns">3</div>
	<div class="small-9 pull-3 columns">9, last</div>
</div>

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

块状网格

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

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

<ul class="small-block-grid-2 large-block-grid-4">
	<li><img src="../img/photo1.png"></li>
	<li><img src="../img/photo2.png"></li>
	<li><img src="../img/photo3.png"></li>
	<li><img src="../img/photo4.png"></li>
</ul>

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

轨道插件

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

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

<ul data-orbit>
	<li>
		<img src="../img/demos/demo1.jpg" />
		<div class="orbit-caption">...</div>
	</li>
	<li>
		<img src="../img/demos/demo2.jpg" />
		<div class="orbit-caption">...</div>
	</li>
	<li>
		<img src="../img/demos/demo3.jpg" />
		<div class="orbit-caption">...</div>
	</li>
</ul>

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

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

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

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

<script>
    $(document).foundation();
  </script>

然后传递轨道选项。

<script>
$(document).foundation('orbit', {
  timer_speed: 10000,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true
});
</script>

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

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

<script src="js/foundation.min.js"></script>
  <!--
  
  <script src="js/foundation/foundation.js"></script>
  
  <script src="js/foundation/foundation.dropdown.js"></script>
  
  <script src="js/foundation/foundation.placeholder.js"></script>
  
  <script src="js/foundation/foundation.forms.js"></script>
  
  <script src="js/foundation/foundation.orbit.js"></script>
  
  -->

有用的工具

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

接下来的是

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

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

初学者linux基础知识