第二关
来源:头歌教学平台
本关任务:用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"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3