初学者linux基础知识_初学者基础：按钮和下拉菜单

初学者linux基础知识

在“入门基础”的这一部分中，我们将研究按钮，下拉菜单和“清除”插件。

---

纽扣

Foundation有一组可靠的按钮，非常易于实现。 只需在任何锚，输入，div或按钮元素上添加一类“按钮”，即可将其转换为华丽的Foundation样式按钮。 这只是为您提供标准的框形按钮，但是您可以使用多种按钮样式和类型。 这是一个简单的例子：

<!-- Size Classes -->
<a class="button" href="#">Default Button</a>
<a class="tiny button" href="#">Tiny Button</a>
<a class="small button" href="#">Small Button</a>
<a class="large button" href="#">Large Button</a>

<!-- Color Classes -->
<a class="button secondary" href="#">Secondary Button</a>
<a class="button success" href="#">Success Button</a>
<a class="button alert" href="#">Alert Button</a>

<!-- Radius Classes -->
<a class="button radius" href="#">Radius Button</a>
<a class="button round" href="#">Round Button</a>

<!-- Disabled Class -->
<a class="button disabled" href="#">Disabled Button</a>

本示例演示了所有预设的大小，样式和状态。 它们各自都提供了很多灵活性。 所有预设都可以使用自定义样式覆盖，这意味着您无需从头开始构建按钮。

按钮使用链接的类来实现不同的样式。 例如，从“按钮”开始，然后添加大小，“小”，颜色，“成功”和半径“圆形”。 您还可以通过添加“已禁用”来禁用任何按钮，以说明这种样式方法的用途。

---

按钮组

基本按钮很容易实现，按钮组也很容易。 他们使用简单的列表结构，如下所示：

<ul class="button-group">
	<li><a class="small button" href="#">Button 1</a></li>
	<li><a class="small button" href="#">Button 2</a></li>
	<li><a class="small button" href="#">Button 3</a></li>
</ul>

这将为您提供由三个按钮组成的标准组，但是您可以添加半径类和类来控制宽度，从“ even-2”，“ even-3”到“ even-8”。 这些宽度类别用于用按钮填充可用空间，并且当偶数类别中的数字与显示的按钮数量匹配时，最好使用这些宽度类别。 例如，如果您有四个按钮，则“ even-4”将是最佳选择。

---

按钮栏

按钮栏可以描述为一组按钮组。 进行一个div，在该div中添加class="button-bar" ，然后在其中放置任意数量的按钮组。 对于更复杂的按钮布局，这可能是真正的帮助。 这是一个例子：

<div class="button-bar">
<ul class="button-group">
	<li><a class="small button" href="#">Button 1</a></li>
	<li><a class="small button" href="#">Button 2</a></li>
	<li><a class="small button" href="#">Button 3</a></li>
</ul>
<ul class="button-group">
	<li><a class="small button" href="#">Button 1</a></li>
	<li><a class="small button" href="#">Button 2</a></li>
	<li><a class="small button" href="#">Button 3</a></li>
</ul>
</div>

在小屏幕上，栏内的每个按钮组会自动堆叠，从而在任何屏幕上都拥有清晰的外观。 通过采用上述每个部分中介绍的选项，您确实可以按按钮进入城镇。

---

下拉按钮

在Foundation的最新主要版本中，引入了一个名为dropdowns的新JavaScript插件，当将其分层放置在按钮顶部时，它确实很方便。 标记本质上要求您向按钮添加“下拉列表”类，并添加自定义属性即“数据下拉列表”。

在此之后是一个无序列表，其中包含与您的data-dropdown属性匹配的id，例如：

<a class="button dropdown" href="#" data-dropdown="drop1">Dropdown Button</a>

</pre>
<ul class="f-dropdown" id="drop1">
	<li><a href="#">This is a link</a></li>
	<li><a href="#">This is another</a></li>
	<li><a href="#">Yet another</a></li>
</ul>

还需要注意的是，ul上的“ f-dropdown”类非常重要，因此请不要忘记添加它。

注意：不要忘记在下载的Foundation中包含下拉js。

分割按钮

您必须使用的最后一层灵活性是在按钮中添加拆分的选项。 这可以用来指示下拉列表，下载的可用性，无论您真正想要什么。 使用'split'类和一个span元素将其添加到您的按钮上，该元素应该包括我们在下拉示例中先前使用的相同的'data-dropdown'属性。

<a class="button dropdown" href="#" data-dropdown="drop1">Dropdown Button </a>

</pre>
<ul class="f-dropdown" id="drop1" data-dropdown-content="">
	<li><a href="#">This is a link</a></li>
	<li><a href="#">This is another</a></li>
	<li><a href="#">Yet another</a></li>
</ul>
<pre>

由于下拉列表JavaScript是一个简单的插件，因此只能使用一个选项-定义打开时应用于下拉列表的类名称：

$(document).foundation('dropdown', {
  activeClass: 'open'
});

---

清除插件

清除后，可以轻松创建具有任何尺寸图像的自适应灯箱。

清除是一个超级快速的灯箱插件。 您可以想象，标记非常简单，并且在轨道滑块不起作用时非常有用。

到目前为止，您将非常熟悉Foundation与列表结构的工作方式，它们再次成为此插件的核心。 建立一个无序列表，每个列表项中包含一些内容。 在ul中添加“ clearing-thumbs”类，再添加一个空的自定义属性“ data-clearing”。

</pre>
<ul class="clearing-thumbs" data-clearing="">
	<li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>
	<li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>
	<li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>
</ul>
<pre>

如果要在ul结构的第一个li中添加“清除功能”类，则Foundation将在您的灯箱选择中将其显示为特色图像。 值得注意的是，清除操作使用了本系列前面介绍的块网格结构。 这有助于确保所有缩略图的高度相同并且分布均匀。

---

结论

在完整介绍了按钮和下拉菜单之后，我们可以期待涵盖自定义表单和开关。 我会在那里见你！

翻译自: https://webdesign.tutsplus.com/articles/foundation-for-beginners-buttons-and-dropdowns--webdesign-12465

初学者linux基础知识