← Комьюнити

Где ошибка в задании 43 бутстрап?

Serhii Starchenko4 ответов
#bootstrap

суть вопроса: Внесите изменение в код таким образом(используя классы Bootstrap), чтобы верхняя панель поиска отображалась на сайте только на экранах с размером ≥992px. Изменение внесите в файл index.html, остальной код не изменяйте

НУЖНО ПРИМЕНИТЬ АТРИБУТЫ hidden i visible.

варианты моих ответов:

1-то, что я понимаю в вопросе: показать верхнюю панель поиска при расширении =>992


<form role="search" class="visible-md visible-lg">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Ваш запрос">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>

<div class="panel panel-info hidden-xs hidden-sm hidden-md hidden-lg">
<div class="panel-heading"><div class="sidebar-header">Поиск</div></div>
<div class="panel-body">
<form role="search">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Ваш запрос">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>

2-возможный контекст с вопроса
<form role="search" class="visible-md visible-lg">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Ваш запрос">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>

<div class="panel panel-info hidden-md hidden-lg">
<div class="panel-heading"><div class="sidebar-header"></div></div>
<div class="panel-body">
<form role="search">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Поиск">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>

3-логический ответ, но он не стоит в сути задания, в моем понимании

<form role="search" class="visible-xs visible-sm">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Ваш запрос"> hidden-sm
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>

<div class="panel panel-info hidden-xs hidden-sm">
<div class="panel-heading"><div class="sidebar-header">Поиск</div></div>
<div class="panel-body">
<form role="search">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Your query">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>

 Варианты не подходят. Где загвоздка. Спасибо

4 ответов

Формулировка задания немного размыта. Там намек на md класс. Я писал недавно в саппорт по этому заданию, сказали, что в скором будущем сделают более понятную формулировку.

К форме нужно добавить бутсраповкий класс visible-md

Такой код должен быть:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap Navbar</title>
		<!-- Подключаем Bootstrap CSS через CDN -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<!-- Подключаем style.css -->
		<link rel="stylesheet" href="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-sm-9 col-sm-push-3">
            			    
                            <form role="search" class="visible-md">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="search" class="form-control input-lg" placeholder="Ваш запрос">
                                        <div class="input-group-btn">
                                            <button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </form> 


                            <h2>Новые фильмы</h2>
                            <hr>
                            <div class="row">
                            
                                <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
                                  <img src="/source_courses/html_css_images/inter.png" 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="/source_courses/html_css_images/matrix.png" 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="/source_courses/html_css_images/cloud.png" 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="/source_courses/html_css_images/max.png" 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="/source_courses/html_css_images/xfiles.png" 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="/source_courses/html_css_images/silicon.png" 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="/source_courses/html_css_images/dead.png" 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="/source_courses/html_css_images/breakingbad.png" alt="">
                                  <div class="film_label">Во все тяжкие</div>
                                </div>
                            
                            </div>
                            
                            <div class="margin-8"></div>
                            
                            <a href="#"><h3>Как снимали Интерстеллар</h3></a>
                            <hr>
                            <p>
                                45 лет исполнилось Кристоферу Нолану — одному из самых успешных режиссеров нашего времени, чьи работы одинаково любимы как взыскательными критиками, так и простыми зрителями. Фильмом изначально занималась студия Paramount. Когда Кристофер Нолан занял место режиссера, студия Warner Bros., которая выпускала его последние фильмы, добилась участия в проекте.
                            </p>
                            <a href="#" class="btn btn-warning pull-right">читать</a>
                            
                            <div class="margin-8 clear"></div>
                            
                            <a href="#"><h3>Актер Том Хенкс поделился впечатлением о фестивале</h3></a>
                            <hr>
                            <p>
                                16 февраля в Лондоне состоялась 67-я церемония вручения наград Британской киноакадемии. Леонардо ДиКаприо, Брэд Питт, Анджелина Джоли, Кейт Бланшетт, Хелен Миррен, Эми Адамс, Кристиан Бэйл, Альфонсо Куарон и другие гости и победители премии — в нашем репортаже.
                            </p>
                            <a href="#" class="btn btn-warning pull-right">читать</a>
                            
                            <div class="margin-8 clear"></div>
                          
            			</div>
            			<div class="col-sm-3 col-sm-pull-9">
 
                            <div class="panel panel-info hidden-xs">
                                <div class="panel-heading"><div class="sidebar-header">Поиск</div></div>
                                <div class="panel-body">
                                    <form role="search">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <input type="search" class="form-control input-lg" placeholder="Ваш запрос">
                                                <div class="input-group-btn">
                                                    <button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </form> 
                                </div>
                            </div>
                            
                            
                            <div class="panel panel-info">
                                <div class="panel-heading"><div class="sidebar-header">Вход</div></div>
                                <div class="panel-body">
                                
                                    <form role="form">
                                        <div class="form-group">
                                            <input type="text"  class="form-control input-lg" placeholder="Логин">
                                        </div>
                                        <div class="form-group">
                                            <input type="password" class="form-control input-lg" placeholder="Пароль">
                                        </div>
                                        
                                        <button type="submit" class="btn btn-warning pull-right">вход</button>
                                    </form>
                                
                                </div>
                            </div>  
                  
                    
                            <div class="panel panel-info">
                                <div class="panel-heading"><div class="sidebar-header">Рейтинг фильмов</div></div>
                                <div class="panel-body">
                                    
                                    <ul class="list-group">
                                        <li class="list-group-item list-group-warning">
                                            <span class="badge">8.9</span>
                                            <a href="#">Интерстеллар</a>
                                        </li>
                                        
                                        <li class="list-group-item list-group-warning">
                                            <span class="badge">8.7</span>
                                            <a href="#">Безумный макс</a>
                                        </li>                  
                                        
                                        <li class="list-group-item list-group-warning">
                                            <span class="badge">8.3</span>
                                            <a href="#">Матрица</a>
                                        </li>                  
                                        
                                        <li class="list-group-item list-group-warning">
                                            <span class="badge">8.1</span>
                                            <a href="#">Облачный атлас</a>
                                        </li>
                                        
                                        <li class="list-group-item list-group-warning">
                                            <span class="badge">8.9</span>
                                            <a href="#">Интерстеллар</a>
                                        </li>
                                        
                                        <li class="list-group-item list-group-warning">
                                            <span class="badge">8.7</span>
                                            <a href="#">Безумный макс</a>
                                        </li>                  
                                        
                                        <li class="list-group-item list-group-warning">
                                            <span class="badge">8.3</span>
                                            <a href="#">Матрица</a>
                                        </li>                  
                                        
                                        <li class="list-group-item list-group-warning">
                                            <span class="badge">8.1</span>
                                            <a href="#">Облачный атлас</a>
                                        </li>
                                    </ul>
                                
                                </div>
                            </div>  


            			</div>
            		</div>
            	</div>
            	<div class="clear"></div>
            </div>
            <footer>
            	<div class="container">
            		<p class="text-center"> <a href="">FRUCTCODE.COM</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>

student_EzgS19bL

Спасибо за помощь, попробую этим способом решить задачу!

Serhii Starchenko

Да, вариант ответа с visible-md в коде подошел.

Но, расширение 1250рх это тоже больше 992рх! Кроме того, в задании ни слова о том, что должно происходить с боковой верхней панелью ПОИСК! 

Формулировка вопроса очень абстрактна и многозначна, вариант ответа истинный один и,  он конкретный! 

Serhii Starchenko

Я думаю, что в задании написано ≥992px - это явная отсылка к md-классу bootstrap из таблицы грида:

https://getbootstrap.com/docs/3.4/css/#grid-options

student_aOGAOlL6

Ваш ответ

Войдите, чтобы ответить