Не удаётся создать левую панель panel panel-info, как создать?
0
Моя страница не видит компонент panel panel-info:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>КиноМонстр Bootstrap 3 </title>
<!-- Подключаем Bootstrap CSS через CDN -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Подключаем style.css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav role = "navigation" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1><a href="#">КиноМонстр</a></h1>
<p>Кино - наша страсть!</p>
</div>
</div>
</div>
<!--Навигация сайта, кнопка меню-->
<button type="button" data-target= "#navbarCollapse"
data-toggle="collapse" class="navbar-toggle">
<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 id="navbarCollapse" class="collapse navbar-collapse navbar-right">
<ul class="nav nav-pills">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Фильмы</a></li>
<li><a href="#">Сериалы</a></li>
<li><a href="#">Рейтинг фильмов</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!--Весь контент сайта-->
<div class="wrapper">
<div class="container">
<div class="row">
<!--Правый блок-->
<div class="col-lg-9 col-lg-push-3">
<h2>Новые фильмы</h2>
<hr>
<div class="row">
<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="C:\Users\Lenovo\Desktop\FructCode\KinoMonster (Bootsrtap 3)\assets\img\Jone Wick 3.jpg" alt="Джон Уик 3">
<div class="film_label">Джон Уик 3</div>
</div>
<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="C:\Users\Lenovo\Desktop\FructCode\KinoMonster (Bootsrtap 3)\assets\img\Men in black International.jpg"
alt="Люди в чёрном:интернэшнл">
<div class="film_label">Люди в чёрном:интернэшнл</div>
</div>
<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="C:\Users\Lenovo\Desktop\FructCode\KinoMonster (Bootsrtap 3)\assets\img\The aftermath.jpg" alt="Последствия">
<div class="film_label">Последствия</div>
</div>
<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="C:\Users\Lenovo\Desktop\FructCode\KinoMonster (Bootsrtap 3)\assets\img\Avengement.jpg" alt="Отмщение">
<div class="film_label">Отмщение</div>
</div>
</div>
<div class="margin-8"></div>
<h2>Новые сериалы</h2>
<hr>
<div class="row">
<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="C:\Users\Lenovo\Desktop\FructCode\KinoMonster (Bootsrtap 3)\assets\img\Game of thrones.jpg" alt="Игра престолов">
<div class="film_label">Игра престолов</div>
</div>
<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="C:\Users\Lenovo\Desktop\FructCode\KinoMonster (Bootsrtap 3)\assets\img\The warrior.jpg"
alt="Люди в чёрном:интернэшнл">
<div class="film_label">Воин</div>
</div>
<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="C:\Users\Lenovo\Desktop\FructCode\KinoMonster (Bootsrtap 3)\assets\img\Black monday.jpg" alt="Чёрный понедельник">
<div class="film_label">Чёрный понедельник</div>
</div>
<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="C:\Users\Lenovo\Desktop\FructCode\KinoMonster (Bootsrtap 3)\assets\img\I am the Night.jpg" alt="Имя мне ночь">
<div class="film_label">Имя мне ночь</div>
</div>
</div>
<div class="Post1">
<div class="margin-8"></div>
<a href="#"> <h3>Как снимали Джон Уик 3</h3> </a>
<hr>
<p>
Сценарист и режиссёр Чад Стахелски в эксклюзивном интервью Collider рассказал, что он находится в середине написания сценария для боевика «Джон Уик 3» (John Wick 3). При этом создатели фильма уже начали его производство.
</p>
<a href="#" class="btn btn-warning pull-right">Читать</a>
</div>
<div class="Post2">
<a href="#"> <h3>Как снимали 8 сезон "Игры престолов"</h3> </a>
<hr>
<p>
Сериал, снятый по мотивам романов Джорджа Р. Р. Мартина «Песнь Льда и Огня»,
за восемь лет
с момента выхода на телеэкраны успел влюбить в себя миллионы зрителей, получить множество различных наград и стать самым популярным сериалом в жанре фэнтези.
</p>
<a href="#" class="btn btn-warning pull-right">Читать</a>
<div class="margin-8 clear"></div>
</div>
</div>
</div>
<!--Левый блок-->
<div class="col-lg-3 col-lg-pull-9">
<div class="panel panel-info">
<div class="panel-heading">
<div class="sidebar-header">Поиск</div>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<footer>
<div class="container">
<p class="text-center"> <a href="http://www.KinoMonster.ua">KinoMonster.ua</a><p>
</div>
</footer>
<!-- Подключаем jQuery и Bootstrap JS через CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>1 ответов
0
Обратите внимание на подсветку кода (здесь в вашем вопросе). Блоки не выделены цветом:
<nav role = "navigation" class="navbar navbar-inverse"><button type="button" data-target= "#navbarCollapse"
data-toggle="collapse" class="navbar-toggle">Это значит, что в них ошибки:
role = "navigation"Пробелов до и после знака равно не должно быть.
После data-target= тоже не должно быть пробела.
Исправьте это.
Вот здесь есть полный пример как должно быть:
https://fructcode.com/ru/courses/bootstrap/interactive-main-page-panel-part-1/