Bulma Navbar начало и конец навигации

Опубликовано: 13 Августа, 2022

Bulma — это бесплатный CSS-фреймворк с открытым исходным кодом, который имеет собственные предварительно стилизованные компоненты, упрощающие создание быстрых и отзывчивых веб-сайтов. В этой статье мы увидим два класса Bulma: navbar-start и navbar-end .

Bulma Navbar start и navbar end Классы:

  • navbar-start: это прямой потомок контейнера navbar-menu Bulma, который находится внутри компонента navbar и может содержать любое количество элементов navbar. На рабочем столе и большем размере экрана ( >= 1024px) контейнер navbar-start будет отображаться слева .
  • navbar-end: это прямой потомок контейнера navbar-menu Bulma, который находится внутри компонента navbar и может содержать любое количество элементов navbar. На рабочем столе и большем размере экрана (>= 1024px) контейнер на панели навигации будет отображаться справа .

Синтаксис:

<nav class="navbar">
    <div class="navbar-menu">
        <div class="navbar-start">
            ...
        </div>

        <div class="navbar-end">
            ...
        </div>
    </div>
</nav>

Пример: в приведенном ниже примере цвет фона navbar-start установлен на основной цвет, а цвет фона navbar-end установлен на цвет ссылки, чтобы их было легко различить.

Выход:

Ссылка: https://bulma.io/documentation/components/navbar/#navbar-start-and-navbar-end