Сетка значки HTML шаблон

Question

Я хочу создать веб-приложение, основной интерфейс которого содержит список значков в сетке. Лучший пример, который я знаю, это Icloud, как вы можете видеть ниже.

Интерфейс Icloud

Я не очень хорош в кодировании HTML, поэтому где я могу найти открытыйшаблон источника как этот?

Спасибо

Answer 1

Действительно, то, что сказал Джулиан Чан: 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 для копирования изображения, которое вы связали.

Надеюсь, это поможет вам! Хорошего дня!