标签式布局在现代 Web 开发中越来越流行，它能够让页面看起来更加清晰、易于理解，能够很好地组织信息和内容。本文将介绍使用 Material Design 风格应用实现标签式布局的方法。
什么是 Material Design 风格
Material Design 由 Google 在 2014 年首次推出，是现代应用程序设计的一种风格。该风格的特点是平面化的界面设计、明亮的颜色和简单的图形元素，符合移动设备的特点和用户习惯。同时，该设计语言也支持在不同类型的设备以及不同大小的屏幕上进行自适应。
Material Design 风格应用的主要元素包括：卡片、浮动操作按钮、切换器、滑动面板、抽屉导航等。
标签式布局的优点
标签式布局是一种基于标签或卡片的布局方式，它的优点包括：
易于识别：标签式布局使得信息分类更加明确，能够帮助用户快速找到所需信息。
易于浏览：标签式布局可以让用户在不打断其阅读过程的情况下浏览更多的信息。
易于导航：标签式布局使得导航更加便捷，用户可以通过标签快速找到所需内容。
实现标签式布局的方法
在 Material Design 风格应用中，可以使用以下方法来实现标签式布局：
1. 使用卡片
卡片是 Material Design 中的一个重要元素，它可以用于展示多种信息，比如图片、文本、按钮等。使用卡片来实现标签式布局，可以使得页面更加清晰、易于理解。
卡片可以使用以下代码来进行创建：
<div class="card">
<div class="card-header">标签名称</div>
<div class="card-body">
...
</div>
</div>其中，.card-header 和 .card-body 用于定义卡片的标题和内容部分。
2. 使用 Tab 选项卡
Tab 选项卡是 Material Design 中的一个常用元素，可以用于切换不同的内容。使用 Tab 选项卡来实现标签式布局，可以使得内容更加清晰、易于访问。
使用 Tab 选项卡可以使用以下代码来实现：
-- -------------------- ---- -------
---- ------------
------- ---------------- ----------------------- ---------------------
------- ---------------- ----------------------- ---------------------
---
---- --------- -------------------
---
------
---- --------- -------------------
---
------
---
------其中，.tablinks 用于定义选项卡标签，.tabcontent 用于定义选项卡内容。在 JavaScript 中，需要定义 openTab 函数用于切换不同的选项卡。
3. 使用列表
列表也是 Material Design 中常用的元素，使用列表来实现标签式布局，可以让页面更加清晰、易于浏览。
列表可以使用以下代码来实现：
-- -------------------- ---- -------
--- ---------- ----------
--- -----------------
-- --------------- ------- ------------ -------------------------
-----
--- -----------------
-- ---------------- ------------ -------------------------
-----
---
-----
---- --------------------
---- --------------- ---- ---- ------- ----------
---
------
---- --------------- ----- ----------
---
------
---
------其中，nav-item 用于定义标签，tab-pane 用于定义标签内容。在 JavaScript 中，需要使用 tab() 函数来切换不同的标签。
总结
在 Material Design 风格应用中，实现标签式布局的方法很多，可以使用卡片、Tab 选项卡、列表等来实现。不同的布局方法适用于不同的场景，选择合适的布局方法可以让页面更加清晰、易于理解和浏览。
参考代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ -----------------------
---- -- --------- -- ---
----- ---------------- ---------------------------------------------------------------------
---- ------- ---
-------
-- ---- --
----- -
-------------- -----
-
------------ -
----------------- --------
------ -----
-------- -----
-
---------- -
-------- -----
-
-- --- -- --
---- -
-------------- -----
-
---- ------ -
----------------- -----
------- -----
-------- -----
------- --------
-------- ---- -----
----------- ---------------- ---- -----
-
---- --------------
---- ------------ -
----------------- --------
------ -----
-
----------- -
-------- -----
-------- -----
-
-- ---- --
--------- -
-------------- -----
-
--------- - -
----------------- -----
------- -----
-------- -----
------- --------
-------- ---- -----
----------- ---------------- ---- -----
-
--------- ---------
--------- ------- -
----------------- --------
------ -----
-
--------- -
-------- -----
-------- -----
-
---------------- -
-------- ------
-
--------
-------
------
---- ------------------
------------ ------ --------------------
---- ---- ---
-------------
---- -------------
---- -----------------------------
---- ------------------
---------
------
------
---- -------------
---- -----------------------------
---- ------------------
---------
------
------
---- --- --- ---
------- --------
---- ------------
------- ---------------- ----------------------- ---------------------
------- ---------------- ----------------------- ---------------------
------- ---------------- ----------------------- ---------------------
------- ---------------- ----------------------- ---------------------
---- --------- -------------------
---------
------
---- --------- -------------------
---------
------
---- --------- -------------------
---------
------
---- --------- -------------------
---------
------
------
---- -- ---
-------------
--- ---------- ----------
--- -----------------
-- --------------- ------- ------------- -------------------------
-----
--- -----------------
-- ---------------- ------------- -------------------------
-----
--- -----------------
-- ---------------- ------------- -------------------------
-----
--- -----------------
-- ---------------- ------------- -------------------------
-----
-----
---- --------------------
---- --------------- ---- ---- ------- -----------
---------
------
---- --------------- ----- -----------
---------
------
---- --------------- ----- -----------
---------
------
---- --------------- ----- -----------
---------
------
------
------
---- -- ------------- - --------- ---------- - ---
------- ------------------------------------------------------------------
------- --------------------------------------------------------------------------
------- ---------------------------------------------------------------------------
---- --- ---------- -- ---
--------
-- --- ----
-------- ------------ -------- -
--- -- ----------- ---------
---------- - ----------------------------------------------
--- -- - -- - - ------------------ ---- -
--------------------------- - -------
-
-------- - --------------------------------------------
--- -- - -- - - ---------------- ---- -
--------------------- - ------------------------------- -------- ----
-
---------------------------------------------- - --------
--------------------------- -- - --------
-
-- ------
---------- -- -
--------- ----------------------
---
---------
-------
-------Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6497a7b448841e98944a7d2a