1-1系统简介与首页设计第二关-优快云博客

本文链接：https://blog.youkuaiyun.com/kkkkjjj22/article/details/143783362

任务描述

本关任务：用Bootstrap实现手机端的博客导航栏效果。

显示或隐藏内容的工具类

和手机端相对比，可以发现：搜索框不见了，首页-资源部分变成了下拉列表，这些是怎么实现的呢？

先说搜索框隐藏的情况，Bootstrap自带隐藏的类.hidden-不同屏幕宽度的类，比如在小屏幕下，添加类.hidden-sm即可在小屏幕下隐藏搜索框。注意，在其他屏幕下都是可见的。

首页-资源部分变成了下拉列表，是PC端下首页-资源部分隐藏，下拉列表显示，这里介绍显示的情况，显示的类对应CSS中display的不同属性，如下表所示：

类组 CSS（display）
.visible--block display: block;
.visible--inline display: inline;
.visible-*-inline-block display: inline-block;
说明： * 表示不同屏幕宽度下的类。

以小屏幕为例：在小屏幕下显示，添加类.visible-sm-block即可，注意。在其他屏幕下都是隐藏的。

下拉列表

这里简单的实现一下下拉列表：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        首页
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">代码库</a></li>
        <li><a href="#">问答</a></li>
        <li><a href="#">资源</a></li>
    </ul>
</div>

说明：

下拉菜单的容器类为dropdown，触发器为button按钮，下拉菜单类为dropdown-menu。

button按钮中的类dropdown-toggle 和 data-toggle=“dropdown” 是实现点击创建下拉菜单，再次点击下拉菜单消失的效果。

button按钮中的 id=“dropdownMenu1” 和下拉菜单的labelledby="dropdownMenu1"没有必然联系，labelledby="dropdownMenu1"可有可无。

是菜单栏右边的倒三角形。

编程要求

在右侧代码框中，填充begin至end之间的代码，完成博客首页在手机端导航栏的效果，针对小屏幕，超小屏幕，要求如下：

搜索框隐藏；

首页-资源部分隐藏；

首页下拉列表显示；

首页下拉列表在小屏幕下占3格，超小屏幕下占4格；

约定：

显示用 .visible-*-block；

先针对小屏幕，再针对超小屏幕；

先写隐藏显示，再写占的格数，也遵循第二条；

代码实现：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>博客</title>
	    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	</head>

	<body>
		<div class="bg">
			<div class="container">
				<div class="row header">
                    <!-----请仔细阅读Begin-End之间的代码，补充双引号" "间缺失的代码------>
                    <!---------- Begin ---------->
                    <!--logo部分-->
					<div class="col-lg-1 col-md-2 col-sm-3 col-xs-3">
						<a href="#">
							<img src="https://data.educoder.net/attachments/download/204880" alt="logo" style="width:80px;">
						</a>
					</div>
                    <!--首页资源部分-->
					<div class="hidden-sm hidden-xs  ">
						<a href="#" class="nav-item">首页</a>
						<a href="#" class="nav-item">代码库</a>
						<a href="#" class="nav-item">问答</a>
						<a href="#" class="nav-item">资源</a>
					</div>
                    <!--首页下拉列表 -->
					<div class="visible-sm-block visible-xs-block col-sm-3 col-xs-4  ">
						<div class="dropdown">
							<a href="#" class="nav-item" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">首页</a>
							<span class="caret"></span>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								<li>
									<a href="#" class="nav-item">代码库</a>
								</li>
								<li>
									<a href="#" class="nav-item">问答</a>
								</li>
								<li>
									<a href="#" class="nav-item">资源</a>
								</li>

							</ul>
						</div>
					</div>
                    <!--搜索框部分-->
					<div class="hidden-sm hidden-xs  ">
						<form class="search">
							<div class="form-group has-feedback">
								<input type="text" class="form-control" id="search" aria-describedby="searchStatus" placeholder="搜索">
								<span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
							</div>
						</form>
					</div>
                    <!--登陆注册部分-->
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 col-lg-offset-1 col-md-offset-1 col-sm-offset-2">
						<a href="#" class="nav-item">登录</a>
						<a href="#" class="nav-item">注册</a>
					</div>
                    <!---------- End ---------->

				</div>
			</div>
		</div>
	</body>

</html>

<style>
	body {
		background: #eee;
	}
	
    .bg {
		width: 100%;
		background: #fff;
		margin-bottom: 20px;
	}
	.header {
		background: #fff;
		line-height: 70px;
	}
	
	.header .search {
		margin-top: 20px;
	}
	
	.header .nav-item {
		padding: 8px;
		font-size: 18px;
	}
</style>