/
renath
/
dredexgrid
Обзор
Документация
Войти
/
renath
/
dredexgrid
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
docs/examples.html
540 строк
26 KB
Renatka
Перевёл на русский язык
13 ноя 2025, 12:33
13 ноя 2025, 12:33
1e2e8fc
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Примеры - SimpleGrid</title> <link rel="stylesheet" href="../dist/simplegrid.css"> <style> .docs-nav { background: #f8f9fa; padding: 1rem 0; border-bottom: 1px solid #dee2e6; margin-bottom: 2rem; } .example-section { background: white; border-radius: 0.5rem; padding: 2rem; margin-bottom: 3rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .example-preview { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 0.375rem; padding: 1.5rem; margin: 1rem 0; } .code-example { background: #1a1d23; color: #e2e8f0; padding: 1.5rem; border-radius: 0.375rem; margin: 1rem 0; overflow-x: auto; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.875rem; } .component-title { color: #2d3748; border-bottom: 2px solid #007bff; padding-bottom: 0.5rem; margin-bottom: 1.5rem; } .nav-brand { font-weight: 600; color: #007bff; text-decoration: none; font-size: 1.25rem; } .example-grid [class*="col-"] { background: rgba(0, 123, 255, 0.1); border: 1px solid rgba(0, 123, 255, 0.2); padding: 1rem; text-align: center; margin-bottom: 1rem; } .btn-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; } .icon { display: inline-block; width: 16px; height: 16px; background: currentColor; mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') center/contain no-repeat; } </style> </head> <body> <nav class="docs-nav"> <div class="container"> <div class="row align-items-center"> <div class="col-6"> <a href="index.html" class="nav-brand">SimpleGrid</a> </div> <div class="col-6 text-right"> <a href="index.html" class="btn btn-outline-primary btn-sm">Документация</a> <a href="getting-started.html" class="btn btn-outline-secondary btn-sm">Начало работы</a> </div> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-12"> <h1>Примеры использования</h1> <p class="lead">Готовые примеры и шаблоны, созданные с помощью SimpleGrid</p> </div> </div> <!-- Система сеток --> <section class="example-section"> <h2 class="component-title">Система сеток</h2> <h3>Базовая сетка</h3> <div class="example-preview"> <div class="container"> <div class="row example-grid"> <div class="col-12"><strong>col-12</strong> - Полная ширина</div> </div> <div class="row example-grid"> <div class="col-6">col-6</div> <div class="col-6">col-6</div> </div> <div class="row example-grid"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div> <div class="row example-grid"> <div class="col-3">col-3</div> <div class="col-3">col-3</div> <div class="col-3">col-3</div> <div class="col-3">col-3</div> </div> </div> </div> <div class="code-example"> <pre><code><div class="container"> <div class="row"> <div class="col-12">Полная ширина</div> </div> <div class="row"> <div class="col-6">Половина</div> <div class="col-6">Половина</div> </div> <div class="row"> <div class="col-4">Треть</div> <div class="col-4">Треть</div> <div class="col-4">Треть</div> </div> </div></code></pre> </div> <h3>Адаптивная сетка</h3> <div class="example-preview"> <div class="container"> <div class="row example-grid"> <div class="col-12 col-md-8">col-12 col-md-8</div> <div class="col-12 col-md-4">col-12 col-md-4</div> </div> <div class="row example-grid"> <div class="col-6 col-lg-3">col-6 col-lg-3</div> <div class="col-6 col-lg-3">col-6 col-lg-3</div> <div class="col-6 col-lg-3">col-6 col-lg-3</div> <div class="col-6 col-lg-3">col-6 col-lg-3</div> </div> </div> </div> <div class="code-example"> <pre><code><div class="container"> <div class="row"> <div class="col-12 col-md-8">Полная на мобильном, 8 колонок на планшете+</div> <div class="col-12 col-md-4">Полная на мобильном, 4 колонки на планшете+</div> </div> <div class="row"> <div class="col-6 col-lg-3">Половина на мобильном, четверть на десктопе</div> <div class="col-6 col-lg-3">Половина на мобильном, четверть на десктопе</div> <div class="col-6 col-lg-3">Половина на мобильном, четверть на десктопе</div> <div class="col-6 col-lg-3">Половина на мобильном, четверть на десктопе</div> </div> </div></code></pre> </div> </section> <!-- Кнопки --> <section class="example-section"> <h2 class="component-title">Кнопки</h2> <h3>Основные стили кнопок</h3> <div class="example-preview"> <div class="btn-demo-grid"> <button class="btn btn-primary">Основная</button> <button class="btn btn-secondary">Вторичная</button> <button class="btn btn-success">Успех</button> <button class="btn btn-danger">Опасность</button> <button class="btn btn-warning">Предупреждение</button> <button class="btn btn-info">Инфо</button> <button class="btn btn-light">Светлая</button> <button class="btn btn-dark">Тёмная</button> </div> </div> <h3>Контурные кнопки</h3> <div class="example-preview"> <div class="btn-demo-grid"> <button class="btn btn-outline-primary">Основная</button> <button class="btn btn-outline-secondary">Вторичная</button> <button class="btn btn-outline-success">Успех</button> <button class="btn btn-outline-danger">Опасность</button> <button class="btn btn-outline-warning">Предупреждение</button> <button class="btn btn-outline-info">Инфо</button> <button class="btn btn-outline-dark">Тёмная</button> </div> </div> <h3>Прозрачные кнопки (Ghost)</h3> <div class="example-preview"> <div class="btn-demo-grid"> <button class="btn btn-ghost-primary">Основная</button> <button class="btn btn-ghost-secondary">Вторичная</button> <button class="btn btn-ghost-success">Успех</button> <button class="btn btn-ghost-danger">Опасность</button> </div> </div> <h3>Мягкие кнопки (Soft)</h3> <div class="example-preview"> <div class="btn-demo-grid"> <button class="btn btn-soft-primary">Основная</button> <button class="btn btn-soft-success">Успех</button> <button class="btn btn-soft-warning">Предупреждение</button> <button class="btn btn-soft-info">Инфо</button> </div> </div> <h3>Размеры кнопок</h3> <div class="example-preview"> <button class="btn btn-primary btn-sm">Маленькая</button> <button class="btn btn-primary">Обычная</button> <button class="btn btn-primary btn-lg">Большая</button> <button class="btn btn-primary btn-xl">Очень большая</button> </div> <h3>Кнопки с иконками</h3> <div class="example-preview"> <div class="btn-demo-grid"> <button class="btn btn-primary btn-icon"> <span class="icon"></span> С иконкой </button> <button class="btn btn-success btn-icon"> <span class="icon"></span> Сохранено </button> <button class="btn btn-outline-primary btn-icon btn-sm"> <span class="icon"></span> Маленькая </button> </div> </div> <h3>Специальные формы кнопок</h3> <div class="example-preview"> <div class="btn-demo-grid"> <button class="btn btn-primary btn-pill">Скругленная</button> <button class="btn btn-success btn-circle">+</button> <button class="btn btn-info btn-square">□</button> <button class="btn btn-warning btn-fab">★</button> </div> </div> <h3>Градиентные кнопки</h3> <div class="example-preview"> <div class="btn-demo-grid"> <button class="btn btn-gradient-primary">Градиент</button> <button class="btn btn-gradient-warning">Градиент</button> </div> </div> <h3>Социальные кнопки</h3> <div class="example-preview"> <div class="btn-demo-grid"> <button class="btn btn-facebook">Facebook</button> <button class="btn btn-twitter">Twitter</button> <button class="btn btn-google">Google</button> <button class="btn btn-github">GitHub</button> </div> </div> <h3>Кнопка-ссылка и Glass эффект</h3> <div class="example-preview"> <div class="btn-demo-grid"> <button class="btn btn-link">Кнопка-ссылка</button> <button class="btn btn-glass">Glass кнопка</button> </div> </div> <h3>Кнопка с бейджем</h3> <div class="example-preview"> <button class="btn btn-primary btn-badge"> Уведомления <span class="badge">5</span> </button> </div> <h3>Группы кнопок</h3> <div class="example-preview"> <div class="btn-group"> <button class="btn btn-outline-primary">Левая</button> <button class="btn btn-outline-primary">Средняя</button> <button class="btn btn-outline-primary">Правая</button> </div> <div class="btn-group btn-group-vertical mt-3"> <button class="btn btn-outline-secondary">Верхняя</button> <button class="btn btn-outline-secondary">Средняя</button> <button class="btn btn-outline-secondary">Нижняя</button> </div> </div> <h3>Разделенная кнопка</h3> <div class="example-preview"> <div class="btn-split"> <button class="btn btn-primary btn-main">Действие</button> <button class="btn btn-primary btn-dropdown">▼</button> </div> </div> <h3>Переключаемая кнопка</h3> <div class="example-preview"> <button class="btn btn-toggle">Выкл</button> <button class="btn btn-toggle active">Вкл</button> </div> <h3>Кнопка загрузки</h3> <div class="example-preview"> <button class="btn btn-primary btn-loading">Загрузка...</button> </div> <h3>Блочная кнопка</h3> <div class="example-preview"> <button class="btn btn-primary btn-block">Кнопка на всю ширину</button> </div> </section> <!-- Формы --> <section class="example-section"> <h2 class="component-title">Формы</h2> <h3>Базовая форма</h3> <div class="example-preview"> <form> <div class="form-group"> <label class="form-label" for="exampleEmail">Email адрес</label> <input type="email" class="form-control" id="exampleEmail" placeholder="name@example.com"> <div class="form-text">Мы никогда не передадим ваш email третьим лицам.</div> </div> <div class="form-group"> <label class="form-label" for="examplePassword">Пароль</label> <input type="password" class="form-control" id="examplePassword" placeholder="Пароль"> </div> <div class="form-group"> <label class="form-label" for="exampleSelect">Пример выбора</label> <select class="form-control" id="exampleSelect"> <option>Опция 1</option> <option>Опция 2</option> <option>Опция 3</option> </select> </div> <div class="form-group"> <label class="form-label" for="exampleTextarea">Пример текстового поля</label> <textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Введите ваше сообщение"></textarea> </div> <button type="submit" class="btn btn-primary">Отправить</button> </form> </div> <h3>Чекбоксы и радиокнопки</h3> <div class="example-preview"> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1">Обычный чекбокс</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="defaultCheck2" checked> <label class="form-check-label" for="defaultCheck2">Отмеченный чекбокс</label> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1">Первая радиокнопка</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="exampleRadios2">Вторая радиокнопка</label> </div> </div> </div> <h3>Переключатели</h3> <div class="example-preview"> <div class="form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"> <label class="form-check-label" for="flexSwitchCheckDefault">Обычный переключатель</label> </div> <div class="form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> <label class="form-check-label" for="flexSwitchCheckChecked">Включенный переключатель</label> </div> </div> <h3>Группа полей ввода</h3> <div class="example-preview"> <div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Имя пользователя"> </div> <div class="input-group mt-2"> <input type="text" class="form-control" placeholder="Имя получателя"> <span class="input-group-text">@example.com</span> </div> </div> </section> <!-- Типографика --> <section class="example-section"> <h2 class="component-title">Типографика</h2> <div class="example-preview"> <h1>h1. Заголовок</h1> <h2>h2. Заголовок</h2> <h3>h3. Заголовок</h3> <h4>h4. Заголовок</h4> <h5>h5. Заголовок</h5> <h6>h6. Заголовок</h6> <p class="mt-3">Это обычный параграф. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-muted">Это приглушенный текст.</p> <p class="text-primary">Это основной текст.</p> <p class="text-success">Это текст успеха.</p> <div class="mt-3"> <p class="text-left">Текст выровненный по левому краю.</p> <p class="text-center">Текст выровненный по центру.</p> <p class="text-right">Текст выровненный по правому краю.</p> </div> </div> </section> <!-- Примеры макетов --> <section class="example-section"> <h2 class="component-title">Примеры макетов</h2> <h3>Карточки цен</h3> <div class="example-preview"> <div class="row"> <div class="col-md-4"> <div style="border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 2rem; text-align: center;"> <h3>Базовый</h3> <h2>$19<span style="font-size: 1rem; color: #6c757d;">/мес</span></h2> <ul style="text-align: left; list-style: none; padding: 0;"> <li>✓ 10 проектов</li> <li>✓ 5GB хранилища</li> <li>✓ Базовая поддержка</li> </ul> <button class="btn btn-outline-primary btn-block">Начать</button> </div> </div> <div class="col-md-4"> <div style="border: 2px solid #007bff; border-radius: 0.375rem; padding: 2rem; text-align: center; background: #f8f9fa;"> <h3>Профессиональный</h3> <h2>$49<span style="font-size: 1rem; color: #6c757d;">/мес</span></h2> <ul style="text-align: left; list-style: none; padding: 0;"> <li>✓ 50 проектов</li> <li>✓ 50GB хранилища</li> <li>✓ Приоритетная поддержка</li> </ul> <button class="btn btn-primary btn-block">Начать</button> </div> </div> <div class="col-md-4"> <div style="border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 2rem; text-align: center;"> <h3>Предприятие</h3> <h2>$99<span style="font-size: 1rem; color: #6c757d;">/мес</span></h2> <ul style="text-align: left; list-style: none; padding: 0;"> <li>✓ Неограниченно проектов</li> <li>✓ 500GB хранилища</li> <li>✓ Поддержка 24/7</li> </ul> <button class="btn btn-outline-primary btn-block">Начать</button> </div> </div> </div> </div> <h3>Секция возможностей</h3> <div class="example-preview"> <div class="row align-items-center"> <div class="col-md-6"> <h2>Удивительная возможность</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <button class="btn btn-primary btn-icon"> <span class="icon"></span> Узнать больше </button> </div> <div class="col-md-6"> <div style="background: #e9ecef; height: 200px; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center;"> <span style="color: #6c757d;">Изображение возможности</span> </div> </div> </div> </div> </section> <!-- Навигация --> <section class="example-section"> <h2 class="component-title">Навигация</h2> <div class="example-preview"> <nav style="background: #f8f9fa; padding: 1rem; border-radius: 0.375rem;"> <div class="row align-items-center"> <div class="col-6"> <strong>Бренд</strong> </div> <div class="col-6 text-right"> <button class="btn btn-ghost-primary btn-sm">Вход</button> <button class="btn btn-primary btn-sm ml-1">Регистрация</button> </div> </div> </nav> </div> </section> <div class="row mt-5"> <div class="col-12 text-center"> <div class="alert alert-info"> <strong>Нужно больше примеров?</strong> Ознакомьтесь с полной документацией или создайте issue на GitHub для конкретных примеров. </div> <a href="index.html" class="btn btn-primary">Полная документация</a> <a href="getting-started.html" class="btn btn-outline-primary">Руководство по началу работы</a> </div> </div> </div> <footer style="background: #f8f9fa; padding: 3rem 0; margin-top: 4rem;"> <div class="container text-center"> <p>© 2024 SimpleGrid. Создано с ❤️ для веб-разработчиков.</p> </div> </footer> </body> </html>