网格图标 html 模板答案

【问题标题】：Grid icons html template网格图标 html 模板
【发布时间】：2020-04-14 14:08:51
【问题描述】：

我想构建一个 Web 应用程序，它的主界面包含一个网格布局中的图标列表。我知道的最好的例子是 Icloud，如下所示。

Icloud interface

我不擅长编写 HTML 代码，那么在哪里可以找到这样的开源模板？

谢谢

【问题讨论】：

您是在为移动设备创建它吗？
查看 Bootstrap：getbootstrap.com 我想它有你要找的东西
@JulianChan 我知道 Bootstrap，但在这种情况下，我想找一个模板来节省时间
@KashanShah 不，只是一个网络应用程序
@evp 您如何定义“节省时间”？ Bootstrap 可以为您节省大量手动调整和设计 HTML 元素的时间，并轻松使 Web 应用程序对移动设备友好。您需要在这里更具体。

标签： html css templates icons

【解决方案1】：

确实，Julian Chan 所说的：https://getbootstrap.com/ 在这种情况下确实很有帮助。

Bootstrap 使用了网格系统，它有很好的文档说明它的行为和工作方式。（https://getbootstrap.com/docs/4.4/layout/grid/ 网格系统文档）。

我为你做了一个小例子：https://www.bootply.com/JWzQ2x6ARu 与引导网格系统

<div class="container">
  <div class="row">
    <div class="col-md-2">
      APP ICON 1
    </div>
    <div class="col-md-2">
      APP ICON 2
    </div>
    <div class="col-md-2">
      APP ICON 3
    </div>
    <div class="col-md-2">
      APP ICON 4
    </div>
    <div class="col-md-2">
      APP ICON 5
    </div>
    <div class="col-md-2">
      APP ICON 6
    </div>
  </div> <!-- End of Row 1 -->
  <div class="row">
    <div class="col-md-2">
      APP ICON 1
    </div>
    <div class="col-md-2">
      APP ICON 2
    </div>
    <div class="col-md-2">
      APP ICON 3
    </div>
    <div class="col-md-2">
      APP ICON 4
    </div>
    <div class="col-md-2">
      APP ICON 5
    </div>
    <div class="col-md-2">
      APP ICON 6
    </div>
  </div> <!-- End of Row 2 -->
</div>

在这种情况下，我给 div 一个 col-md-2 类来复制您链接的图像。

希望对您有所帮助！祝你有美好的一天！

【讨论】：

【解决方案2】：

简单实现：

ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

li {
  box-sizing: border-box;
  list-style: none;
  width: 25%;
  padding: 20px;
  position: relative;
  display: flex;
  justify-content: center;
}
img{
    width: 150px;
    height: 150px;
    cursor: pointer;
}

<ul>
  <li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
  <li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
  <li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
  <li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
  <li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
  <li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
</ul>

【讨论】：