kavlan html bootstrap
1.0.0
Kavlan — это идеальный шаблон темной панели администратора, который упрощает навигацию и обслуживание вашей системы администрирования. Чистый, отзывчивый и простой в использовании Kavlan обеспечивает пользовательский интерфейс, который поможет вам создать успешный интерфейс. И прежде всего, это бесплатно!
Посмотреть демо | Скачать ZIP
Требования
Быстрый старт
Страницы шаблонов
Демо-ссылка
Ключевые особенности шаблона
Структура файла шаблона
Руль
Шаблон данных JSON
Настройка стилей шаблонов
Создать новые страницы
Бутстрап-документация
Кредиты
Связаться с нами
Если вы не собираетесь работать с исходным кодом шаблона (а это значит, что вы не будете его компилировать или запускать сервер разработки Webpack), вам не нужно ничего устанавливать. Вы можете просто перейти в папку dist и начать редактировать файлы.
Большинство разработчиков будут редактировать исходный код, а также запускать Webpack для перекомпиляции файлов шаблонов. В этом случае убедитесь, что у вас установлен Node.js. Вы можете скачать его здесь
Загрузите последнюю версию ИЛИ клонируйте репозиторий: git clone https://github.com/PixelRocket-Shop/kavlan-html-bootstrap.git
Установите Node.js, если его еще нет в вашей системе.
Откройте корень проекта в командной строке.
запустите npm install в командной строке.
запустите npm start , чтобы запустить сервер разработки Webpack.
если вы хотите перекомпилировать файлы шаблонов (которые выводятся в папку dist), запустите npm run build
Шаблон состоит из 6 страниц:
Панель управления
Страница входа
Страница регистрации
Страница забытого пароля
Страница 404
Пустая страница
Чтобы свести повторение кода к минимуму, мы использовали Handlebars.js в качестве шаблонизатора и частичные элементы для быстрого добавления одного и того же кода на разные страницы. Мы также используем плагин Handlebars для данных JSON — это позволяет нам использовать циклы и выводить один блок кода HTML вместо повторения одного и того же HTML.
URL-адрес демо
Обратите внимание, что это только HTML-шаблон. Он не подключается к базе данных и не будет автоматически работать в системе управления контентом (Wordpress и т. д.). Вам нужно будет включить наш код в ваше приложение.
Интеграция Chart.js с тремя различными типами диаграмм
Построен с использованием Bootstrap 5.
Полностью отзывчивый
Компонент последних заказов
Складная боковая панель (автоматически сворачивается при изменении размера браузера)
Компонент уведомлений
Компонент аватара
Компонент входа/регистрации
dist — сгенерированная версия шаблона. Перейдите сюда, если вы не хотите работать с исходным кодом шаблона. Но будьте осторожны: если вы настроите что-либо непосредственно в этой папке, а затем перекомпилируете шаблон с помощью веб-пакета, если только вы не переместите папку dist из шаблона, ваши изменения будут переопределены.
node_modules — каталог, в который NPM устанавливает зависимости. Вы не увидите эту папку, пока не завершите установку шаблона. Вам не нужно создавать эту папку.
src — исходный код шаблона. Перейдите сюда, чтобы настроить свой шаблон.
src/assets — ресурсы шаблона, такие как CSS, JS, изображения и т. д.
src/data — файлы данных шаблона JSON. Мы используем эти файлы JSON, чтобы упростить вам работу по вставке контента в шаблон.
src/html — страницы шаблонов. Перейдите сюда, чтобы редактировать существующие страницы или добавлять новые.
src/partials — частичные шаблоны рулей.
Handlebars — это механизм шаблонов, который позволяет нам сохранять исходный код наших шаблонов максимально организованным и чистым. Он сокращает дублирование кода и за счет использования вспомогательных функций позволяет разработчикам шаблонов очень быстро выводить большие объемы данных с минимальным количеством кода. Подробнее об этом можно прочитать здесь.
Откройте следующий файл в нашем шаблоне: src/html/index.html.
Около строки 21 вы увидите следующий код:
{{> content/breadcrumbs }}Это часть руля. Этот код сообщает Handlebars заглянуть внутрь папки с именем content (находящейся в папке parts), а затем найти файл с именем «хлебные крошки» и вставить его в файл index.html при его компиляции.
Есть несколько важных замечаний по поводу использования партиалов Handlebars:
Все наши частичные файлы хранятся внутри src/partials. Не размещайте частичные элементы где-либо еще.
Мы используем .html в качестве частичного расширения файла. Мы также добавили .svg в качестве допустимого частичного расширения файла.
Если у вас есть папки внутри папок внутри вашей частичной папки, ссылайтесь только на папку, в которой находится частичная. Таким образом, «partials/header/navbars/navbar.html» будет называться «navbars/navbar».
Не включайте частичное расширение файла. Обратите внимание, что в приведенном выше примере мы выводим «хлебные крошки», а не «хлебные крошки.html».
Плагин Webpack Handlebars, который мы используем, поставляется с очень удобной утилитой, которая позволяет нам передавать файлы JSON в качестве данных шаблона.
Пожалуйста, перейдите по адресу: src/data. Здесь находятся файлы JSON с данными нашего шаблона. Вы можете редактировать, удалять или добавлять свои собственные в эту папку.
Все исходные файлы CSS/SASS шаблона хранятся в папке ресурсов шаблона. Перейдите в src/assets/scss. Откройте theme.scss в своем редакторе.
Это основная точка входа для всех остальных файлов SASS/CSS.
Чтобы создать новую страницу, перейдите в редакторе кода по адресу: src/html. Чтобы упростить создание правильного HTML, клонируйте существующую страницу. Переименуйте вновь созданный файл в любой URL-адрес, который вам нужен. И все. Теперь вы можете открыть новую страницу в редакторе кода, внести изменения и затем сохранить файл. Закройте сервер разработчика Webpack и перезапустите его, чтобы страница появилась.
Bootstrap уже имеет подробный сайт документации, который поможет вам настроить и использовать все функции Bootstrap по умолчанию. Bootstrap 5 полностью интегрирован с исходным кодом нашего шаблона. Пожалуйста, сначала посетите сайт документации Bootstrap, чтобы узнать о любых функциях Bootstrap по умолчанию: Посетите сайт документации Bootstrap.
Бутстрап
диаграмма.js
Unsplash
Пексели
Pixabay
Simplebar.js
Вы можете найти наш веб-сайт здесь или написать нам по адресу [email protected].
