Уроки Bootstrap верстки / #3 - Система сеток и адаптивное меню

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

✔ -------------

- Уроки от #GoshaDudar 👨🏼‍💻
- Все уроки по хештегу #GoshaBootstrap

[emptymail]

Все кто запоролся на этом уроке. Здесь идет аж Bootstrap 3 какой-то там. navbar-header уже не нужен, к ul не надо nav, <li> имеют класс nav-item, <a> в li имеют класс nav-link. А сам <nav должен иметь класс navbar navbar-expand-lg navbar-light bg-light чтобы быть как в уроке. А чтобы работал класс active для пункта меню, этот класс active надо вставить не в <li>, а в <a> внутри него. Сопоставляйте действия с документацией по Bootstrap 5

[tryexceptions]

для Bootstrap 4

<nav class="navbar navbar-expand-lg navbar-default bg-light">
<a class="navbar-brand" href="#">ITPROGER</a>

<div>
<ul class="navbar-nav">
<li class="active">
<a class="nav-link" href="#">Главная </a>
</li>
<li>
<a class="nav-link" href="#">О нас</a>
</li>
<li>
<a class="nav-link" href="#">Обратная связь</a>
</li>
</ul>
</div>
</nav>

[wxtqzgp]

кто из 2019: <div class="row">
<div class="col-lg-5 order-7" style="background-color: red">Первый</div>
<div class="col-lg-7 order-5" style="background-color: orange">Второй</div>
</div>

[medicdoma]

Спасибо, честно говоря за все время просмотра различных уроков, здесь самое понятное объяснение, круто!

[mrgouane]

Большое Вам спасибо за урок. Всё просто, доступно, а главное бесплатно :)

[xkberqq]

Прошёл год. Вместо push и pull теперь используется order. попробуй тут угнаться...

[vasya]

Автор красавчик, очень легко объясняет и мне понятно, спасибо те

[Artem-izce]

Уроки шикарные, все твои курсы лучшие ))

[Pagegift]

Неплохие уроки!
Для новичков самое то.
Спасибо, Гоша

[hot_kurs]

Уф, сколько уроков пересмотрела но только здесь поняла что и как, пасибки автору:)

[Dager]

Из документации Бутстрапа 4, если вы хотите чтобы выглядело как у автора: то вот код:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>

[bbiecsx]

Дякую, пояснюєш чудово!!!Постійно дивлюсь твої уроки, пояснює без води ...саме те що потрібно, дуже вдячний за твої уроки) З мене лайк+ і підписка!

[jedistars]

У меня все точно так же сделал но у меня меню не по горизонтали а по вертикали в чем может быть проблема please guys

[rjdgdcd]

Толково!!! Честно говоря я думал Bootstrap останется не освещённым. Ан нет, вот тебе и Гоша Дударь!

[TheCHristyMeD]

Большое спасибо за уроки, из Киргизии привет)))

[gzuyvle]

если выполнить на базе версии 4.5.3 будет другой вид, все течёт все меняется

[pavlomospan]

Стал намного лучше говорить и продумывать материал! Радует качество и быстрота разбора материала. Всё круто!

[jek]

Гоша Просто супер !!! Спасибо тибе ОГРОМНОЕ

[xjcogcz]

7:52
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Nazvanie</span>
</div>
</nav>
так по-моему лучше

[soldatov_ss]

Это уже третье видео в этом плейлисте, где нет сторонней рекламы 0_0
Робин-гуд с 666-к подписоты)