Nano Hash - криптовалюты, майнинг, программирование

Как классы navbar-toggle, roll, navbar-collapse работают вместе?

Я новичок в мире CSS и Bootstrap 3.0. Ниже приведен код, который я могу найти во многих местах, и теперь я могу написать его без проблем. Но я действительно не знаю, как обстоят дела за кулисами.

<div class="navbar navbar-static-top navbar-inverse" role="navigation">
        <a class="navbar-brand">Company</a>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".top-nav">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse top-nav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>

Приведенный выше код предоставит мне динамический пользовательский интерфейс. Может ли кто-нибудь ответить на мои вопросы ниже

  1. Как устанавливается соединение между кнопкой и панелью навигации. Ответ: В этом случае я знаю, что класс с именем «верхний неф» соединяет эти два компонента. Но тогда какое значение имеют другие классы (collapse navbar-collapse). Я узнал, что нам нужно иметь оба класса, т.е. свернуть и свернуть навигационную панель. Не знаю, почему?
  2. Все волшебство делается с помощью CSS или у нас есть какой-то код javascript, который манипулирует кодом? (Думаю, да, поскольку существует data-атрибут)
  3. Может ли кто-нибудь предложить другое использование атрибута data-toggle и data-target в bootstrap 3, чтобы четко понять концепцию?

С уважением, Хемант.

twitter-bootstrap twitter-bootstrap-3
31.12.2013

Ответы:


1

1. Характер связи между кнопкой и панелью навигации:

Через collapse.js. Из документации v3,

buttons show and hide another element via class changes:
.collapse hides content
Use a button with the data-target attribute and the data-toggle="collapse".

поэтому в вашем коде data-target=".top-nav"

Классы collapse и navbar-collapse важны для CSS.

Оба необходимы, чтобы разрешить более конкретные селекторы в CSS.

2. Панель навигации сворачивается с помощью JavaScript: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/collapse.js

3. Атрибуты переключение данных и data-target используются во время начальной загрузки для таких вещей, как переключение видимости, как обсуждалось, а также в карусели или для запуска модальных окон.

23.01.2017

2

Теперь это намного проще исправить в Bootstrap 4.x. Просто настройте класс навигационной панели в своем html, например...

    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">

Возиться с navbar-expand-sm: меняйте окончание -xs, -sm, -md, -lg, -xl, пока панель навигации не свернется туда, куда вы хотите. У меня ушло некоторое время на это, поэтому я решил поделиться :-)

28.05.2019
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..