semantic-uiНачало работы с семантикой


замечания

В этом разделе представлен обзор того, что такое semantic-ui, и почему разработчик может захотеть его использовать.

Следует также упомянуть о любых больших предметах в семантике ui и ссылаться на связанные темы. Поскольку Documentation для semantic-ui является новым, вам может потребоваться создать начальные версии этих связанных тем.

Версии

Версия Дата выхода
[2.2.10] 2017-03-28
[2.2.9] 2017-02-21
[2.2.8] 2017-02-21
[2.2.7] 2016-12-21
[2.2.6] 2016-10-27
[2.2.5] 2016-10-27
[2.2.4] 2016-08-25
[2.2.3] 2016-08-21
[2.2.2] 2016-07-07
[2.2.1] 2016-06-27
[2.2.0] 2016-07-26
[2,1] 2015-09-02
[1.12] 2015-04-13
[1,0] 2014-11-24
[0,1] 2013-09-25

Установка через NodeJS - рекомендуется

Рекомендуемый метод - установка через NodeJS. Это предпочтительнее, потому что вы можете использовать его для создания файлов, выбирая только нужные вам компоненты.

Шаг 1 : Установить узел ( ссылка )

Шаг 2. Установите Gulp глобально (-g) на свой компьютер.

npm install -g gulp
 

Semantic UI использует Gulp для предоставления инструментов командной строки для создания тематических версий библиотеки только с необходимыми компонентами.

Шаг 3 : Установите Semantic-UI локально для вашего проекта

cd /path/to/your/project

npm install semantic-ui --save
 

Шаг 4. Перейдите в папку, в которой была сохранена семантика-ui, и выполните следующую задачу gulp (это может быть сделано автоматически)

cd node_modules/semantic-ui    
gulp install
 

Это запустит интерактивный установщик. Просто следуйте инструкциям, чтобы выбрать элементы SUI, которые вы хотите, и он будет создавать для вас соответствующие файлы.

  • Сначала вам нужно будет выбрать тип установки. Сначала пользователи могут выбрать автоматический режим для создания SUI
  • Затем вам нужно будет указать папку проекта и где вы хотите сохранить SUI (по умолчанию - semantic/ )
  • В случае пользовательской установки вы получите возможность выбрать нужные компоненты.

Шаг 5 : Ссылка на ваш HTML-код.

Свяжите скомпилированный файл CSS и JavaScript в своем HTML-файле

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
 

Все сделано!