【发布时间】：2021-07-18 01:05:59
【问题描述】：
设计一个网页，其中应包含 Bootstrap 的响应式导航栏、响应式圆形图像和响应式页脚。
网页截图如下：
图 1：大型设备中的网页
https://drive.google.com/file/d/1szF9Fc8uX_2wtVw2ase_Lxmg_7ZHitzy/view?usp=sharing
图 2：小型设备中的网页：
https://drive.google.com/file/d/1RclzRGsN_PTptMHzrDznFlTzrY2yK5fc/view?usp=sharing
注意：
给出了网页“responsive.html”模板。您只需为“responsive.html”文件和“app.css”文件的指定部分编写代码。
关键点：
-
向导航栏添加响应功能。折叠特性被一个 ID 为“btn-id”的按钮触发，该按钮属于 Bootstrap 的导航切换类，然后具有两个数据元素。第一个，data-toggle，用于告诉 JavaScript 如何处理按钮，第二个，data-target，指示各种元素，如导航链接、表单和其他要切换的内容
-
将导航品牌设置为“MyBrand”。
-
使用适当的 Bootstrap 类创建三个图标栏（汉堡按钮）。这将切换导航可折叠 div 标记中的元素。
-
为图像添加响应式功能，使其可以自动调整以适应屏幕大小。
-
如有必要，请缩小图像，但切勿放大到大于其原始尺寸。相应地设置属性。为此覆盖“app.css”文件中“img-responsive”类的必要css属性。将图像的最大宽度设置为 100%，将高度设置为“自动”。
写完代码后我遇到了一些错误：
失败1：设置按钮的可折叠性
失败 2：为“span”标签设置图标栏
失败 3：为“span”标签设置 3 个图标栏
失败 4：数据切换应为“折叠”
失败 5：数据目标应该是用于切换导航链接、表单和其他内容等元素的标签的 ID。
你能告诉我在这之后我应该怎么做才能解决这些错误。
这是我写的代码：-
body {
font-family: 'Open Sans', sans-serif;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: #ddd;
padding: 20px;
text-align: center;
}
article {
padding: 40px;
}
article img {
text-align: center;
box-shadow: 6px 6px 8px #777;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
article p {
font-size: 16px;
}
.img-responsive {
max-width: 100%;
height: auto;
}
/* The following code is used to create same-sized columns
in a multi-column layout.
Code from:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
*/
/* columns of same height styles */
.container-xs-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-xs-height {
display: table-row;
}
.col-xs-height {
display: table-cell;
float: none;
}
@media (min-width: 768px) {
.container-sm-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-sm-height {
display: table-row;
}
.col-sm-height {
display: table-cell;
float: none;
}
}
@media (min-width: 992px) {
.container-md-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-md-height {
display: table-row;
}
.col-md-height {
display: table-cell;
float: none;
}
}
@media (min-width: 1200px) {
.container-lg-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-lg-height {
display: table-row;
}
.col-lg-height {
display: table-cell;
float: none;
}
}<!-- DO NOT ALTER THIS TEMPLATE. FILL YOUR CODE IN THE SPECIFIED PLACES -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet" />
<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>
</head>
<body>
<header>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#btn-id">
<span class="sr-only">Toogle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- FILL YOUR CODE FOR BRAND AND TOGGLE (ICON BAR) FOR RESPONSIVE NAVIGATION BAR -->
<a class="navbar-brand" href="#">MyBrand</a>
</div>
<!-- Collect the nav links, forms, and other contents for toggling -->
<div class="collapse navbar-collapse" id="btn-id">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<div class=" ">
<div class=" ">
<section class=" ">
<article>
<!-- WRITE YOUR CODE FOR RESPONSIVE CIRCLE IMAGE -->
<img class="img-responsive img-circle" id="image" src="https://www.capecod.com/wp-content/gallery/nature-walk-through-harwich-conservation-trust-lands/SK_West-Harwich-Nature-Walk-Through-Consevation-Trust-Lands_10.23.18-7.jpg" alt="Nature Image" />
</article>
</section>
</div>
</div>
<footer class="footer">
<p class=" ">Lorem ipsum</p>
</footer>
</body>
</html>【问题讨论】：
-
我想这是一个家庭作业问题。然而这个网站作为严格的规则和准则。比如每个问题只问一个问题。因此，请先阅读指南：meta.stackoverflow.com/questions/334822/… - stackoverflow.com/help/how-to-ask
标签： html css bootstrap-4 responsive