利用Bootstrap制作汉堡按钮（header部分）

最新推荐文章于 2021-07-09 07:08:40 发布
最新推荐文章于 2021-07-09 07:08:40 发布
阅读量2.1k 收藏 9
点赞数 2
分类专栏： html 文章标签： bootstrap css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45968014/article/details/106139813
版权

页面展示：本次网页header部分的页面效果。
技术要求：Bootstrap布局容器、Bootstrap导航栏
制作汉堡按钮的固定写法：
在这里插入图片描述
同时需要安装Bootstrap下载安装，下载地址：https://www.bootcss.com/
在这里插入图片描述
在这里插入图片描述
解压之后会有css、js、fonts,但是js中没有jQuery文件。
在这里插入图片描述
这时复制此地址在网页打开：https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js，看到了版本信息后，在页面右击另存为之后会弹出一个对话框文件名为jquery.min.js保存即可。
在这里插入图片描述
在这里插入图片描述
在写网页是把需要的css和js导入即可。
下面是代码展示：

<!DOCTYPE html>
<html>
<head>
<title>header</title>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="view
最低0.47元/天 解锁文章
洋毛
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯干货 | UI界面中按钮设计汉堡按钮\菜单
awayaya1的博客
08-05 1340
汉堡按钮 汉堡菜单按钮（动画） 汉堡按钮 它是隐藏菜单的按钮。单击或点击它时，菜单会展开。 美丽的汉堡菜单 美丽的汉堡动画菜单 汉堡动画菜单 这种菜单（以及按钮）的名称由于它的形状由三条水平线组成，看起来像典型的汉堡包。 今天，它是一种广泛使用的移动端页面布局的互动元素 ; 关于其利弊的争论仍然很热烈。 汉堡菜单动画 汉堡菜单 汉堡GIF 汉堡菜单释放空间使界面更简约和通风; 从功能的角度来看，它为其他重要的布局元素节省了大量空间。对于响应和自适.
#人丑多学习#之Bootstrap header
qq_29279803的博客
06-06 380
选用软件：webstrom 不要问为什么，其实就是为了跟B站视频用一个软件好对应学习，可以选择其他的。 下载：https://getbootstrap.com/docs/4.5/getting-started/download/ 1. Compiled CSS and JS 2. Examples 因为是只基于Bootstrap的框架进行修改，所以暂时下载以上2个文件。 Compiled CSS and JS，框架基础，必要不可少 Examples，提供多种参考样式，如：登陆，导航栏等等，既可以免费套用.
快速搭建响应式导航栏汉堡菜单
weixin_30646505的博客
05-02 1882
方法一：/*--汉堡菜单代码编程--*/<div class="header"> <nav> <input type="checkbox" id='togglebox' /> //定义一个复选框的input元素，并指定id或name //使用label元素并指定for属性与input元素绑定 <label class="me...
bootstrap汉堡按钮
qq_34328404的博客
06-22 5092
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有
Bootstrap实战---header处理
Season CSDN博客
07-09 1168
Bootstrap实战—header处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&
Bootstrap 页面标题（Page Header）
美奇软件开发工作室
04-12 1331
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 &lt;div&gt; 中：实例&lt;div class="page-header"&gt;      &lt...
汉堡按钮的实现
aizhe1517的博客
01-27 294
汉堡按钮的实现思想是：button内包含一个span，设置span为绝对定位，并设置背景颜色，使之成为汉堡按钮的夹心，同理，再用span:before、span:after，创造一上一下两片面包，具体实现如下： <body> <button class="hamburger"> <span>menu</span&g...
Bootstrap页面标题Page Header的实现方法
08-31
Bootstrap 页面标题 Page Header 的实现方法 Bootstrap 框架提供了多种方式来实现页面标题 Page Header，它是一种常用的布局组件，能够帮助开发者快速创建一个美观的页面标题。下面将对 Bootstrap 页面标题 Page ...
BootstrapTable加载按钮功能实例代码详解
08-29
BootstrapTable加载按钮功能实例代码详解 BootstrapTable是一个基于Bootstrap框架的jQuery插件，主要用于在Web应用程序中生成表格。加载按钮功能是BootstrapTable的一个重要组件，它允许用户在表格中添加、编辑和...
Bootstrap按钮组简单实现代码
08-31
Bootstrap按钮组简单实现代码 Bootstrap按钮组是Bootstrap框架中的一种常用UI组件，用于实现按钮的组合展示和交互功能。下面我们将详细介绍Bootstrap按钮组的简单实现代码。 Bootstrap按钮组的基本概念 Bootstrap...
利用bootstrap制作新闻网站页面
12-04
利用bootstrap制作新闻网站页面
Bootstrap页头（Page header）
歪脖先生的博客
05-21 1884
页头 页头（Page header）就相当于一个标题框，给从 <h1> 到 <h6> 的任意标题元素套上这个简单的外壳，就可以为它添加更多的间隙，并通过一个下边框把它从页面中分离出来。 要在页面中放置一个页头，只需把标题元素放在类为 .page-header的 <div> 中即可。另外，还可以给标题元素添加 <small> 标签，让它充当副标题...
使用Boostrap制作导航栏和汉堡按钮
weixin_45684562的博客
10-05 3200
导航栏制作 使用Boostrap制作基础导航栏主要分为以下步骤： 1.事先引入jquery.js、boostrap.min.js和boostrap.min.css文件。 2.添加一个<div>标签或者一个容器<nav>,使用.navbar类和.navbar-default类，并添加role=“navigation”（增加可访问性）。 3.在上面的标签或容器内再添加一个div...
CSS实现汉堡按钮
zt_pursue的博客
05-21 6801
汉堡按钮的实现思想是：button内包含一个span，设置span为绝对定位，并设置背景颜色，使之成为汉堡按钮的夹心，同理，再用span:before、span:after，创造一上一下两片面包，具体实现如下：（效果如图） &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
css实现汉堡菜单按钮
weixin_45032627的博客
06-18 2406
汉堡菜单按钮：当用户点击菜单按钮，在弹出导航栏的同时，汉堡形状的按钮也会动画渐变成叉号。再次对其点击时，导航栏收回，按钮也恢复原样。 关于汉堡菜单，虽然 GitHub 上已经有相关的库 hamburgers，但因为我使用的 nuxt 框架采用的是rem布局，对于px到rem的转换让我实在头疼。再三思量之下，还是决定自己手动模仿一个出来。具体实现效果如下动图。 一、设计思路 至于将三横杠动态渐变成叉号的具体过程，每个人都有自己的奇思妙想，不必拘泥。这里简要说明上述动画的设计思路： 将顶部横杠顺时针旋转90
汉堡按钮html写法,ProtoPie 详解 — 汉堡按钮制作
weixin_36354131的博客
06-05 981
原标题：ProtoPie 详解 — 汉堡按钮制作每周一期的 ProtoPie 详解教程又来啦，上期马克笔设计留学的MUzi老师主要介绍了 ProtoPie 的交互动作原理《ProtoPie详解 — 交互动作》，从这期开始MUzi老师将为大家单独介绍具体动效的制作，这期的主题是——汉堡按钮的制作。汉堡按钮是非常常见的按钮，由于它的样子非常像汉堡所以被称为汉堡按钮。如今汉堡按钮的样子不再是单纯的三条线...
Bootstrap Page header
歪脖先生的博客
03-10 2000
Page headerPage header就相当于一个标题框，给从 &lt;h1&gt; 到 &lt;h6&gt; 的任意标题元素套上这个简单的外壳，就可以为它添加更多的间隙，并通过一个下边框把它从页面中分离出来。要在页面中放置一个Page header，只需把标题元素放在类为 .page-header 的 &lt;div&gt; 中即可，也可以给标题元素添加 &lt;small&gt; 标签，...
bootstrap-选项卡头部及内容
小姑姑的博客
11-14 1448
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签页</title> <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css"> <script src="../JS/jquery-3.2.1.min
bootstrap5的汉堡按钮怎么实现
最新发布
03-31
Bootstrap 5 的汉堡按钮可以通过以下代码实现： ``` <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> ``` 其中，`.navbar-toggler` 是按钮的类，`data-bs-toggle="collapse"` 和 `data-bs-target="#navbarNav"` 是用来定义按钮的行为，`aria-controls="navbarNav"` 和 `aria-expanded="false"` 是用来提供按钮的辅助功能，`.navbar-toggler-icon` 是汉堡按钮的图标。需要注意的是，汉堡按钮通常用于导航栏中，因此 `data-bs-target` 的值应该是导航栏的 ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值