101 lines
5.8 KiB
Markdown
101 lines
5.8 KiB
Markdown
|
---
|
|||
|
|
title: Semantic UI
|
|||
|
|
localeTitle: Семантический интерфейс
|
|||
|
|
---
|
|||
|
|
## Семантический интерфейс
|
|||
|
|
|
|||
|
|
#### Введение
|
|||
|
|
|
|||
|
|
Семантический интерфейс - это интерфейсная платформа разработки, подобная бутстрапу, предназначенному для тематики. Он содержит предварительно построенные семантические компоненты, которые помогают создавать красивые и гибкие макеты, используя человеко-дружественный HTML.
|
|||
|
|
|
|||
|
|
Согласно веб-сайту Semantic UI, структура использует сжатый HTML, интуитивно понятный JavaScript и упрощенную отладку, чтобы сделать начальную разработку приятным и восхитительным. И он интегрируется с React, Angular, Meteor, Ember и многими другими структурами, чтобы помочь организовать слой пользовательского интерфейса наряду с логикой приложения.
|
|||
|
|
|
|||
|
|
#### История версий
|
|||
|
|
|
|||
|
|
Первый предварительный выпуск появился на github в сентябре 2013 года, созданный [Джеком Лукичем](https://github.com/jlukic) .
|
|||
|
|
|
|||
|
|
Semantic UI `1.x` был впервые выпущен в ноябре 2014 года с нарушением предыдущих предварительных релизов.
|
|||
|
|
|
|||
|
|
Semantic UI `2.x` был впервые выпущен в июне 2015 года и представил новые ui, исправления ошибок, улучшения и улучшения темы по умолчанию.
|
|||
|
|
|
|||
|
|
#### Поддержка браузера
|
|||
|
|
|
|||
|
|
Текущая версия `2.2.x` поддерживает следующие браузеры
|
|||
|
|
|
|||
|
|
* Последние 2 версии FF, Chrome, Safari Mac
|
|||
|
|
* IE 11+
|
|||
|
|
* Android 4.4+, Chrome для Android 44+
|
|||
|
|
* iOS Safari 7+
|
|||
|
|
* Microsoft Edge 12+
|
|||
|
|
|
|||
|
|
#### Монтаж
|
|||
|
|
|
|||
|
|
Существует несколько способов установки Semantic UI, некоторые из самых простых способов:
|
|||
|
|
|
|||
|
|
1. **Через сеть доставки контента (CDN)**
|
|||
|
|
|
|||
|
|
Это самый легкий для новичков. Создайте HTML-файл, как показано ниже.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>Semantic UI</title>
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
|
|||
|
|
<!-- Add custom stylesheet here -->
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<!-- Write your html code here -->
|
|||
|
|
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`NOTE:` . Вышеуказанная ссылка CDN в строке 5 включает все доступные компоненты в семантическом интерфейсе. Если вы хотите установить конкретный компонент, [нажмите здесь,](https://cdnjs.com/libraries/semantic-ui) чтобы увидеть его соответствующую ссылку CDN.
|
|||
|
|
|
|||
|
|
2. **Использование инструментов сборки**
|
|||
|
|
|
|||
|
|
Предположим, вы используете Ubuntu Linux OS с установленными `node` и `npm` , для других операционных систем [нажмите здесь](https://semantic-ui.com/introduction/getting-started.html)
|
|||
|
|
|
|||
|
|
В своем каталоге проекта установите gulp глобально, используя npm
|
|||
|
|
```
|
|||
|
|
npm install -g gulp
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Установка семантического интерфейса
|
|||
|
|
```
|
|||
|
|
npm install semantic-ui --save
|
|||
|
|
cd semantic/
|
|||
|
|
gulp build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Включить в HTML
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
|
|||
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
|
|||
|
|
<script src="semantic/dist/semantic.min.js"></script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Обновление через npm
|
|||
|
|
```
|
|||
|
|
npm update
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. **Интеграция с другими платформами**
|
|||
|
|
|
|||
|
|
Вы можете интегрировать семантический интерфейс с другими интерфейсами разработки, такими как React, Angular, Ember или Meteor. [Нажмите здесь,](https://semantic-ui.com/introduction/integrations.html) чтобы получить дополнительную информацию и инструкции по интеграции.
|
|||
|
|
|
|||
|
|
#### Больше информации
|
|||
|
|
|
|||
|
|
Семантический пользовательский интерфейс имеет тщательную и очень хорошо организованную документацию, которая поможет вам быстро и быстро. Следующие ссылки будут полезны в вашем путешествии Semantic UI.
|
|||
|
|
|
|||
|
|
* [Веб-сайт семантического интерфейса](https://semantic-ui.com/)
|
|||
|
|
* [Начало работы с семантическим интерфейсом](https://semantic-ui.com/introduction/getting-started.html)
|
|||
|
|
* [Примеры шаблонов семантического UI](https://semantic-ui.com/usage/layout.html#pages)
|
|||
|
|
* [Настройка и создание семантических пользовательских интерфейсов](http://learnsemantic.com/)
|