博客系统 - 系统简介与首页设计

原创

已于 2022-11-28 15:47:17 修改 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #css

于 2022-11-28 15:38:48 首次发布

本篇博客主要介绍了如何在手机端实现博客导航栏的效果。任务是创建一个针对小屏幕和超小屏幕的导航栏，其中搜索框和首页-资源部分在不同屏幕尺寸下有不同的显示策略。在小屏幕下，搜索框和首页-资源部分隐藏，首页下拉列表显示；在超小屏幕下，下拉列表占相应格数。文章详细解释了使用Bootstrap的显示类和下拉菜单的实现方法，包括按钮触发器和下拉菜单的样式设置。

第二关

来源：头歌教学平台

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

编程要求

在右侧代码框中，填充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">
        <