Рубрики
Без рубрики

Начальная панировочная крошка

Что такое начальные сухари? Вы можете указать местоположение текущей страницы в Navi … Tagged с Bootstrap, JavaScript, WebDev, HTML.

Что такое начальные сухари?

Вы можете указать местоположение текущей страницы в навигационной иерархии, которая автоматически добавляет разделители через CSS.

Монтаж

Ручная установка (ZIP -пакет)

Чтобы воспользоваться нашим компонентом Bootstrap Images и использовать их в вашем проекте, вам сначала нужно установить MDB 5 бесплатный пакет

MDB CLI

Смотрите наш Quick Start Tutorial Чтобы обнаружить и использовать весь потенциал MDB 5 и MDB CLI

Npm

Предварительные условия

Перед началом проекта обязательно установите Node LTS (12.x.x рекомендуется) .

Монтаж

Чтобы установить набор пользовательского интерфейса MDB в ваш проект, легко введите следующую команду в терминале:

npm i mdb-ui-kit
Импорт модулей JS

Вы можете импортировать всю библиотеку или просто отдельные модули:

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
Импорт файла CSS

Для импорта таблицы стилей MDB, пожалуйста, используйте следующий синтаксис:

@import '~mdb-ui-kit/css/mdb.min.css';
Импорт модулей SCSS

Вы также можете импортировать отдельные модули SCSS. Чтобы сделать это правильно, мы рекомендуем скопировать их из местоположения Node_Modules/MDB-UI-KIT/SRC/SCSS непосредственно в ваш проект и импортировать так же, как файлы CSS.

Интеграция WebPack

Вы можете значительно ускорить процесс создания нового проекта на основе WebPack, используя наш Стартер Анкет

CDN

Установка через CDN является одним из самых простых методов интеграции набора пользовательского интерфейса MDB с вашим проектом. Просто скопируйте последний скомпилированный тег сценария JS и тег ссылки CSS из cdnjs к приложению.

Не забудьте добавить также шрифт Awesome и Roboto Font, если вам нужно. Вот пример кода:

CSS
JS

Настройка

Основной пример
Изменение сепаратора

Разделители автоматически добавляются в CSS через :: до и Контент Анкет Они могут быть изменены, изменившись $ breadcrumb-divider Анкет Цитата Функция необходима для создания кавычек вокруг строки, поэтому, если вы хотите > Как сепаратор, вы можете использовать это:

$breadcrumb-divider: quote(">");

Вы можете увидеть больше примеров настройки на 📄 Страница документации на панировочных сухарях

Важные ресурсы

Вот ресурсы, которые мы подготовили, чтобы помочь вам работать с этим компонентом:

  1. Читать 📄 Страница документации на хлебных крошках <- Начни здесь
  2. Чтобы получить максимальную отдачу от вашего проекта, вы также должны познакомиться с другими вариантами навигации, связанных с сухарями. См. Раздел ниже, чтобы найти их список.
  3. Вы можете использовать предварительно назначенные навигационные элементы в 📥 Starter Bootstrap 5 шаблонов
  4. Шаблоны являются частью 📦 Бесплатный комплект пользовательского интерфейса для Bootstrap 5
  5. После завершения проекта вы можете опубликовать его с помощью CLI, чтобы получить 💽 Бесплатный хостинг (бета)

Связанный контент и стили опции и функции

Узнайте Bootstrap 5 за 1,5 часа

Дополнительные ресурсы

Узнайте веб -разработку с нашим Учебная дорога : 🎓 Начните учиться

Присоединяйтесь к нашему списку рассылки и получите Эксклюзивные ресурсы для разработчиков 🎁 Получите подарки

Присоединяйтесь к нашей частной группе FB для Вдохновение и опыт сообщества 👨‍👩‍👧‍👦 Попросите присоединиться

Поддержка создания пакетов с открытым исходным кодом со звездой на GitHub

Оригинал: “https://dev.to/mdbootstrap/bootstrap-5-breadcrumbs-ik8”

Читайте ещё по теме: