Twitter Bootstrap: оформление текста внутри navbar

Быстрый ответ

Для внедрения текста в навигационную панель Bootstrap используется класс .navbar-text. Он гарантирует правильное представление текста, соответствующее оформлению панели:

<nav class="navbar navbar-default">
  <span class="navbar-text">Поздравляем! Вы изучаете Bootstrap</span>
</nav>

Такой текст без проблем интегрируется в навигационную панель и не требует дополнительных пользовательских стилей CSS.

Опции стилизации текста в навигационной панели

Инлайновые и блочные стили

Текст в навигационной панели возможно стилизовать как инлайновый, используя <span>, так и как блочный:

<!-- Инлайновый текст -->
<span class="navbar-text">Привет, это инлайновый текст!</span>

<!-- Блочный текст -->
<p class="navbar-text">Тут блок с текстом</p>

Выделение текста без ссылок

Для выделения текста, не превращая его в ссылку, нужно поместить заголовок (например, <h5>) внутрь <span>:

<nav class="navbar navbar-default">
  <span class="navbar-text"><h5>Внимание! Мы отправляемся в путешествие по Bootstrap</h5></span>
</nav>

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

Текст как элемент навигации

Хотите добавить текст в качестве навигационного элемента без привязки к ссылке? Используйте класс .nav-item, который создает более пристойную и гармоничную внешность навигационного меню:

<ul class="navbar-nav">
  <li class="nav-item navbar-text">
    Вперед, в приключения с Bootstrap!
  </li>
</ul>

Такой подход сохраняет визуальное единое представление и согласованность текста с элементами nav-link.

Визуализация

Представьте навигационную панель Bootstrap как линию времени в фильме:

🎬 🝖 Главная 🝖 О нас 🝖 Услуги 🝖 Контакты 🝟 Финал!

Каждый из указателей на линии символизирует пункт меню. Цель – чётко обозначить маршруты для пользователей, проводя их через сценарий вашего сайта.

Хорошо спланированная навигация – это как режиссура Спилберга для кинофильма!

Развязка пазла стилистики

Адаптивность дизайна

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">
    <span class="navbar-text ml-auto">Пристегните ремни, на старт!</span>
  </div>
</nav>

Функциональность сворачивания навигационной панели сочленяется с текстом и поддерживает адаптивность: на больших экранах текст расположен справа, на маленьких – по центру.

Исходники на GitHub

Оказались в тупике, как кот среди собак? Обращайтесь к Задаче 2799 на GitHub, где создатели и пользователи обмениваются полезными советами и трюками по работе с навигационной панелью Bootstrap.

Изучение Bootstrap

Следите за последними обновлениями документации Bootstrap. Они всегда содержат полезные идеи по интеграции текста в навигационную панель.

Полезные материалы

1. Документация Bootstrap NavBar — официальное руководство по навигационным панелям в Bootstrap v5.0.
2. Учебник по Bootstrap NavBar на W3Schools — техники создания адаптивной навигационной панели.
3. CSS Tricks – Полное руководство по Flexbox — всё о работе с Flexbox.
4. Stack Overflow – Выравнивание элементов навигации в Bootstrap справа — как выровнять элементы навигации.
5. SitePoint – Руководство по Twitter Bootstrap — основы Bootstrap для комплексных интерфейсов.
6. Tutorial Republic – Bootstrap 5: адаптивная верхняя/нижняя навигационная панель — детали о навигационной панели Bootstrap 5.
7. Codeply – Примеры навигационной панели Bootstrap — практические примеры для экспериментов с навигационными панелями.