Мы только что завершили обсуждение важности предоставления навигации на вашем сайте.
Мы также рассмотрели несколько различных способов, которые мы можем обеспечить навигацию на веб-сайте.
Теперь пришло время для нас посмотреть на bootstrap и посмотреть на компоненты,
которые предоставляет bootstrap, которые позволяют нам добавлять навигацию на наши веб-сайты.
Два важных компонента начальной загрузки - Navbar и Breadcrumbs.
Мы рассмотрим оба из них в этом упражнении.
Давайте начнем с добавления навигационной панели в верхней части нашей веб-страницы.
Мы можем сделать это, используя компонент Navbar, который является частью бутстрапа.
Итак, как мы начнем?
Мы переходим к телу нашей HTML-страницы.
Итак, здесь у меня открыт index.HTML.
И вверху
я собираюсь добавить элемент, используя этот HTML-тег nav.
Теперь NAV HTML-тег предназначен для обеспечения навигации.
Итак, давайте воспользуемся этим тегом и построим нашу навигационную панель, используя тег nav.
Итак, теперь, вверху,
я собираюсь добавить в этот тег,
поместить навигационную панель и построить навигационную панель вокруг этого тега навигации.
Итак, как только мы добавим этот тег nav в index.HTML,
тогда мы можем идти вперед, а затем применить классы bootstraps к этому тегу nav.
Итак, я применяю навигационную панель класса.
Итак, класс navbar в bootstrap позволяет мне создать панель навигации.
Существует множество различных способов настройки панели навигации,
которые мы рассматриваем как дополнительные классы, которые добавят к этому тегу навигации.
Наряду с Navbar,
мы также добавляем в следующий класс, который является navbar-dark.
Теперь я хочу, чтобы моя панель навигации была темной в цвете,
с более темным фоном.
Потому что это хорошо сочетается с сайтом, который я только что разработал.
Мы можем иметь navbar-light,
который является более светлой цветной навигационной панелью.
Таким образом, вы можете использовать любой из них на вашей веб-странице.
Следующий класс, который я собираюсь использовать, - это класс navbar-expand-sm.
Теперь, а также, я укажу размер экрана
, ниже которого вступает в существование переключение.
Теперь, когда я говорю navbar-expand-sm, это
означает, что для маленьких и дополнительных маленьких экранов
эта навигационная панель станет переключаемой навигационной панелью. Это
означает, что он будет свернут в этих размерах экрана.
Вы скоро узнаете, как это работает,
когда мы посмотрим, как мы можем добавить
плагин коллапса в навигационную панель, чтобы включить такое поведение.
Таким образом, наряду с переключателем навигационной панели sm,
я собираюсь применить цвет фона к навигационной панели изначально,
что было бы bg-первичным.
Теперь bg-primary - это основной цвет, который определен в вашем бутстрапе.
По умолчанию это версия синего цвета, которая используется бутстрапами.
Так что я начну с этого как моего основного цвета.
Позже я настрою цвет моей навигационной панели, используя некоторые классы CSS.
Кроме того, я также собираюсь применить
другой класс, называемый фиксированной вершиной, к этой навигационной панели.
То, что делает фиксированная верхняя часть, это фиксирует панель навигации в верхней
части окна браузера, где эта веб-страница визуализируется.
Даже когда вы прокручиваете свою
влажную страницу, панель навигации оставалась вверху страницы.
Вы можете просто использовать фиксированное дно, чтобы
зафиксировать панель навигации в нижней части окна браузера или вы можете сказать, статический верх.
А также, вы можете просто не использовать этот класс.
Если вы не используете это,
ваша навигационная панель также будет прокручиваться, когда ваша веб-страница прокручивается вверх.
На моем веб-сайте я выбираю, чтобы панель навигации фиксировалась в верхней части страницы.
Есть много других опций,
которые вы можете найти в документации bootstraps.
Таким образом, это один из примеров использования панели навигации.
Теперь, кроме того, внутри панели навигации,
я собираюсь заключить любой контент,
который будет использоваться в навигационной панели внутри контейнера.
Таким образом, здесь я буду использовать элемент div
и применять класс контейнера к этому элементу div.
Таким образом, все, что заключено внутри,
будет ограничено той же шириной, что и остальная часть моей веб-страницы.
Как вы помните, я использовал класс контейнера для
определения ширины содержимого на моей веб-странице,
поэтому я собираюсь применить то же самое к моей панели навигации,
так что моя информация панели навигации будет
отображаться в той же ширине, что и остальная часть моей веб-страницы.
Вы можете не использовать класс контейнера на панели навигации, и в этом случае
содержимое панели навигации будет распространяться по всей ширине экрана.
Внутри панели навигации
я собираюсь добавить класс в тег здесь.
Этот класс, который я называю navbar-brand,
позволяет мне отображать некоторую информацию в качестве информации о бренде на моей панели навигации.
Так что, например, если у
вас есть компания, вы можете отобразить название вашей компании или
логотип вашей компании, используя navbar-бренд,
так что он будет отображаться на панели навигации.
Очевидно, что когда вы
посещаете многие сайты, вы увидите, что название компании где-то видно
на панели навигации этого сайта.
Итак, позвольте мне добавить этот бренд navbar.
Это также может быть гиперссылка на домашнюю страницу вашего сайта.
Так что, я оставлю это там.
На остальных страницах моего сайта
я просто добавлю href, чтобы вернуть меня на страницу index.HTML,
которая является главной страницей.
И внутри я добавлю название своего ресторана.
Давайте сохраним изменения и
посмотрим на текущее состояние моей навигационной панели.
Перейдя на веб-страницу в браузере,
теперь вы можете увидеть, где панель навигации видна на моей веб-странице в браузере.
Панель навигации теперь находится в верхней части страницы, и вы
можете видеть, что, когда я прокручиваю свою страницу,
панель навигации по-прежнему остается наверху, потому что я привык к классу с фиксированным топом.
Вы также можете увидеть
navbar-бренд, позволяющий мне отображать название ресторана там.
Позже я собираюсь заменить это логотипом для этого ресторана.
Вы заметили, что панель навигации частично покрыта Jumbotron.
Вы собираетесь исправить это немного позже, используя некоторые настройки CSS.
Следующее, что я собираюсь сделать, это добавить несколько ссылок на мою панель навигации,
так что эти ссылки приведут меня к другим страницам на моем веб-сайте.
Так как же нам это сделать?
Возвращаясь к index.HTML,
я собираюсь добавить в ul здесь,
в котором я собираюсь объявить
все различные ссылки, которые будут отображаться в моем окне навигации.
Итак, этот ul, к которому я собираюсь применить класс как navbar-nav.
Таким образом, это класс, который поможет мне определить
набор ссылок, которые будут включены в мою панель навигации.
И эти ссылки будут отображаться горизонтально внутри моей навигационной панели.
Автокласс mr, который я также применил к ul,
используется для указания правого поля.
Таким образом, это класс утилиты, который доступен
в bootstrap, который позволяет мне указать правый край.
Так что, если я скажу, mr-auto,
это означает, что с правой
стороны, правый край должен быть установлен как можно больше.
Таким образом, это означает, что содержимое будет нажато как
можно больше влево в навигационной панели.
Внутри этого неупорядоченного
списка я могу использовать элементы списка
, чтобы включить различные ссылки, которые будут частью моей панели навигации.
Поэтому там я собираюсь добавить несколько ссылок там,
и я начну с указания первого там со ссылкой.
К каждому элементу списка на панели навигации
вы собираетесь применить класс как элемент навигации.
Это позволяет отображать эти элементы списка горизонтально в виде ссылок на моей панели навигации.
И затем внутри здесь
я могу использовать тег, чтобы добавить
фактическую ссылку, которая будет частью моей навигационной панели.
Поэтому внутри я использую тег с
классом nav-link, и это также позволяет мне использовать href.
Атрибут для определения связи там.
И первое, что я включу, это Дом.
Таким образом, это будет включать элемент под названием Home в этой навигационной панели.
Позвольте мне просто скопировать это, а затем вставить это.
И тогда мы отредактируем некоторые из них, потому что я хочу добавить
четыре разных в свою панель навигации.
Первый из них - Дом.
Второй будет «О».
Третьим было бы Меню, которое я собираюсь построить как часть следующего курса.
И последним будет Контакт.
Типичный веб-сайт компании будет иметь такие ссылки в своей навигационной панели.
С добавлением этих двух,
теперь я могу сделать то,
что мы можем явно определить одну из этих ссылок как активную ссылку,
что означает, что когда вы находитесь на этой конкретной странице, эта
конкретная ссылка может быть выделена.
Поэтому для этого мы применим здесь класс, называемый активным к одному из этих элементов списка.
В этом случае, поскольку это страница index.html,
я применяю активный класс к домашней ссылке там.
Это в значительной степени завершает мою панель навигации на странице index.HTML.
Одна мелочь, которую я хотел бы исправить здесь, это то, что ссылка О,
я хочу связать ее с aboutus.HTML
страницу, которую мы уже включили в наш веб-сайт,
потому что это то, где я хочу, чтобы она привела.
Давайте посмотрим на нашу навигационную панель этой части.
Вернувшись на нашу навигационную панель,
вы можете сразу увидеть результат включения
этих элементов в неупорядоченный список.
Таким образом, вы видите «Главная», «
О программе», «Меню»
и «Контакты», и каждый из них является ссылкой, но это элемент навигации здесь.
И обратите внимание, как Home подсвечивается здесь из-за использования активного класса.
Итак, если я нажму на «О программе»,
он должен отвести меня на поле «О».
Вот и вот, вот и мы.
Но я понимаю, что у меня нет способа вернуться,
так что это означает, что мне также нужно передать эту панель навигации на страницу aboutus.HTML.
Мы доберемся туда через короткое время.
На данный момент я собираюсь быстро перемещаться с помощью кнопки «Назад»
моего браузера обратно на мою страницу index.HTML.
Одна вещь, которую я также хотел продемонстрировать вам, это то, как
эта панель навигации будет рухнуть для небольших и дополнительных небольших размеров экрана.
Итак, давайте включим представление с помощью отзывчивого представления,
а затем позвольте мне перейти к Galaxy S5.
И я заметил, что когда я использую Galaxy S5, как это,
вы можете видеть, что это отображается раньше, чем он уже охватывает экран.
Это не то поведение, которое я хочу.
Я хочу, чтобы иметь возможность скрыть это, когда я просматриваю это на маленьком и дополнительном маленьком экране.
И тогда, возможно, я добавляю здесь кнопку, которую я могу
использовать для включения и отключения отображения этих ссылок.
Вы видели такие вещи на мобильных сайтах.
Как мы это сделаем в бутстрапе?
Давайте перейдем к следующему шагу.
Возвращаемся к нашей навигационной панели.
Позвольте мне добавить туда кнопку,
которая будет действовать как кнопка переключения для отображения и скрытия
моих ссылок с моей навигационной панели, когда она отображается на дополнительных интеллектуальных и малых экранах.
Итак, чтобы добавить туда,
позвольте мне добавить кнопку и применить некоторые классы к этой кнопке.
Мы обсудим больше о кнопках в бутстрапе в следующем уроке.
Но чтобы добавить кнопку в bootstrap,
вы примените класс для этой конкретной кнопки как navbar-toggler.
Итак, это навигатор.
Итак, как следует из названия,
вы уже начинаете понимать, что эта кнопка будет делать в этом случае.
И тогда я бы добавил тип как кнопку, чтобы указать, что это действует как кнопка.
А затем переключение данных как свертывание.
Теперь этот атрибут data-toggle, который вы увидите здесь, на самом деле
является использованием компонента JavaScript в bootstrap.
Мы собираемся посмотреть на эту строку дефисов данных типа атрибутов больше в следующем модуле,
где мы будем смотреть на bootstraps JavaScript компоненты.
Панель навигации требует одного из этих компонентов JavaScript, чтобы иметь возможность
включать и выключать мои ссылки на моей панели навигации,
поэтому я быстро представил эту концепцию здесь,
но мы вернемся, чтобы изучить
эти компоненты JavaScript больше в следующем модуле.
Таким образом, переключение данных свернуть, а
затем цель данных как #Navbar.
Теперь я собираюсь представить еще один div с идентификатором как navbar.
Итак, когда я указываю дату или цель #Navbar,
это относится к идентификатору этого другого элемента, который будет
целью этой конкретной кнопки здесь.
Итак, это та часть, которую я добавляю в нижнюю часть.
А также, я хочу, чтобы кнопка отображала что-то здесь.
И обычно, когда вы видите такие кнопки на мобильных сайтах,
он будет содержать свободные строки там,
так что обычно называется значок Navbar-Toggle.
Итак, я собираюсь включить специальный значок, который
включен в bootstrap, называемый значком navbar-toggler.
Итак, если я применим этот класс к тегу span,
то это введёт значок navbar-toggler к моей кнопке здесь.
Таким образом, это вводит кнопку.
Мы посмотрим, как это выглядит через короткое время.
Теперь, когда я нажимаю эту кнопку,
я хочу иметь возможность показывать и скрывать эти ссылки.
Чтобы позволить мне сделать это,
то, что я собираюсь сделать, это окружить этот ul div здесь.
Итак, я собираюсь войти и представить div вокруг этого ul.
И к этому div
я буду применять класс как коллапс,
а затем navbar-clapse, а затем я даю ему идентификатор как Navbar.
Теперь вы начинаете видеть корреляцию между
этими классами и идентификатором и тем, что я объявил в переключении данных и цели данных.
Итак, здесь цель данных, которую я указываю как #Navbar, и поэтому идентификатор, данный этому div, является navbar.
И я указываю переключатель данных как свертывание.
Collapse является одним из компонентов JavaScript bootstraps,
который мы рассмотрим более подробно в следующем модуле.
Итак, заключив это внутри div для небольших и дополнительных маленьких экранов,
это будет скрыто по умолчанию,
но когда я нажимаю на кнопку,
содержимое этого div будет показано на экране.
Позвольте мне также добавить mr-auto к классу navarbar-brand, чтобы
я автоматически вводил достаточный правый край для этого бренда navbar-.
Теперь давайте посмотрим на это в нашем браузере.
Перейдя в браузер, теперь вы можете увидеть, как
моя навигационная панель рухнула на небольших и дополнительных маленьких размерах экрана.
И обратите внимание на эту кнопку с левой стороны.
Когда я нажимаю на кнопку,
ссылки на моей панели навигации отображаются и скрыты.
Это поведение, которое я хочу для адаптивной реализации моей навигационной панели.
Если переключиться на обычный,
больший экран, панель навигации полностью отображается, включая ссылки.
Но когда я просматриваю то же самое на меньшем экране, как это,
тогда ссылки панели навигации скрыты за
этой кнопкой, а затем будут включаться и выключены, нажав на эту кнопку.
Так что это отзывчивое поведение, которое вы можете
построить в панели навигации на вашем сайте.
Теперь, когда мы завершили навигационную панель на моей странице index.HTML,
я хочу иметь возможность ввести ту же панель навигации на странице aboutus.HTML.
Прежде чем мы туда доберемся, пойдем к нижнему колонтитулу.
И тогда вы заметили, что в нижнем колонтитуле
у нас есть эти ссылки.
Я хочу иметь возможность обновить эту ссылку, чтобы указать на
aboutus.HTML, чтобы даже щелкнув ссылку в моем нижнем колонтитуле,
я все равно перейду на страницу о.
Теперь, возвращаясь сюда,
то, что я собираюсь сделать, это просто скопировать этот код этой навигационной панели отсюда.
А затем перейдите на страницу aboutus.HTML, а затем вставьте ее в мою страницу aboutus.HTML.
Не только это, мне нужно сделать некоторые корректировки этого,
потому что это теперь на странице aboutus.HTML.
Очевидно, есть несколько вещей, которые мне нужно обновить.
Прежде всего, этот бренд navbar, который должен привести меня обратно
на мою домашнюю страницу, теперь должен быть обновлен как index.HTML здесь.
И затем, элемент списка здесь теперь второй Главная страница снова,
я хочу обновить это до index.HTML там, а затем вторую ссылку на о.,
потому что это страница aboutus.HTML,
я собираюсь положить его обратно в этот хэш там, а затем я удалю
активный класс из первого , а затем применить активный класс ко второму элементу,
потому что это страница «О странице» и поэтому это должно быть тот, который выделен.
Опять же, перейдя в нижний колонтитул страницы «О странице».
В нижнем колонтитуле я буду делать те же обновления для ссылок здесь, поэтому
Главная страница должна привести меня к index.HTML, а затем позволить мне сохранить изменения.
Итак, теперь моя About Page также обновляется правильно.
Перейдя в браузер,
теперь вы можете увидеть, что я нахожусь на моей домашней странице, а затем, когда я нажимаю на странице о странице,
я перейду на страницу о программе.
Обратите внимание, как та же панель навигации отображается в About Page,
поэтому у вас есть о том, чтобы быть выделенным, потому
что я применил к этому активный класс, а затем я могу
вернуться на свою домашнюю страницу, нажав на нарвар-бренд или домашнюю страницу.
Итак, давайте нажмем на нарвар-бренд, и мы снова в нашей
главной или домашней странице или index.HTML.
Таким образом, теперь навигация правильно настроена как на главной странице, так и на странице о программе.
Несколько дополнительных вещей, которые я собираюсь сделать, это применить, если вы видите,
что это класс, который я могу изменить цвет моей
навигационной панели, а также я хотел бы добавить хлебную крошку к этой странице, и так, что хлебная крошка также даст мне еще один способ вернуться к моей домашней странице, а также указать
иерархию на моем сайте, где я нахожусь в данный момент.
Итак, давайте сделаем эти два шага дальше.
Возвращаясь к этому редактору в styles.css.
Я собираюсь добавить еще пару классов здесь.
Вы заметили, что моя навигационная панель скрывала часть джамботрона.
Чтобы избежать этого,
то, что я собираюсь сделать, это для моего тела,
я собираюсь дать отступ 50 пикселей
сверху, чтобы эти 50 пикселей были оставлены для панели навигации для покрытия.
Всякий раз, когда вы используете фиксированную верхнюю панель навигации,
рекомендуется дать это дополнение к телу
вашей веб-страницы, чтобы навигация не покрывала
самый верхний элемент в теле вашей веб-страницы.
Итак, остальные я собираюсь оставить как
нулевые пиксели, а также z-индекс для моего тела как ноль.
Из ваших знаний CSS вы понимаете, что делает z-индекс,
и следующий, который я собираюсь сделать, я собираюсь
перегрузить navbar-dark класс, добавив еще один цвет для
класса navbar, а цвет, который я собираюсь
выбрать, - 512DA8.
Это темно-фиолетовый цвет, который выглядит очень хорошо на моем сайте.
Действительно, Если у вас есть интерес, где я нашел эти цвета, вы можете посетить
www.android.com, а затем посмотреть их документацию для дизайна материала и там,
у них есть предложения о том, как цвета могут быть использованы
в вашем приложении для Android, но то же самое относится даже к веб-сайту,
так что где я пошел и выбрал эти цвета для использования на моем сайте.
Итак, применяя это, теперь, когда я это делаю,
мне нужно вернуться на мою страницу index.HTML, а
затем из навигационной панели я должен удалить этот bg-primary.
В противном случае цвет, который я предложил в CSS, не будет применяться к этому.
Аналогичным образом перейдите на страницу aboutus.HTML, а затем прокрутите
панель навигации, а затем удалите из нее bg-primary.
Теперь, пока я нахожусь на странице aboutus.HTML,
позвольте мне ввести панировочную крошку в мой контейнер,
первую строку моего контейнера там.
Вот где был титул «О нас»,
так что там я собираюсь войти и представить ол.
Я просто использую тег ol как способ введения хлебной крошки.
Вы можете использовать даже div для этого, и он все равно будет работать отлично.
Просто так получилось, что пример документации bootstraps использовал ol, поэтому
я придерживаюсь того, что даже простой div также будет работать нормально здесь.
Итак, я говорю ол класс кол-12 панировочные крошки.
Таким образом, применялись классы хлебной крошки
, а не col-12, что растянуло весь экран.
И внутри, я собираюсь войти и добавить два элемента списка.
Теперь вы видите, почему использование ol полезно здесь,
потому что я могу использовать элементы списка для описания элемента хлебной крошки.
Итак, элемент хлебной крошки здесь,
поэтому я включаю один элемент хлебной крошки, а затем внутри там я буду использовать
тег A, чтобы определить ссылку обратно на мою домашнюю страницу.
Поэтому я говорю, «A», а затем к этому A,
я даю href как index.HTML, а затем
включаю это в мою первую крошку, а затем после этого
следующий, который я собираюсь включить, - это другой элемент списка, а
второй элемент списка, который я буду применять класс как элемент хлебной крошки и активный.
Поэтому обратите внимание на использование активного класса здесь, а затем внутри, я скажу «о
нас», мне не нужна ссылка здесь, потому что я уже на странице
, поэтому его не нужно включать для этого элемента списка.
Давайте сохраним изменения,
чтобы вы могли увидеть, как хлебная крошка была введена на этой
странице «О нас» здесь.
Давайте посмотрим на полученную веб-страницу.
Перейдя на мою веб-страницу, теперь вы можете видеть, что цвет навигационной панели
теперь изменился на темно-фиолетовый, которые вводятся
через CSS, и это выглядит красиво на экране здесь.
Темно-фиолетовый, а затем светлее фиолетовый, а затем
на дне еще более светлее фиолетовый для моего нижнего колонтитула.
Ну, я не дизайнер,
но это лучшее, что я мог придумать с точки зрения добавления близко к веб-сайтам.
Как вы знаете из истории, мужчины слепые цвета.
Поэтому у нас очень плохой вкус в цветах.
Если вы женаты, ваша жена обязательно напомнит вам об этом.
Давайте перейдем к странице «О странице» и посмотрим, как это выглядит.
Таким образом, это страница «О странице» и в разделе «О странице» вы можете
увидеть навигационную панель с правильным цветом
там и отметить хлебную крошку, включенную в About Us здесь.
Таким образом, вы можете увидеть Главная, которая приводит вас обратно на страницу индекса, а
затем О нас, как вы видели, мы применили активную ссылку,
активный класс к этому.
Так вот как отображается «О нас» и Домашняя страница.
Таким образом, это стиль навигации по умолчанию, используемый
в bootstrap, и если я нажму на главную страницу, я вернусь на мою домашнюю страницу.
С этим мы завершаем это упражнение на навигационной панели и сухарях.
Это хорошее время для вас сделать git фиксацию с сообщением «navbar и breadcumbs».