bootstrap移动端时导航栏从左边滑出/弹出
2023-03-05 01:39:06 68
Jquery Bootstrap
bootstrap移动端时导航栏从左边滑出/弹出，直接复制以下代码看结果。 ```html <!doctype html> <html lang="zh-CN"> <head> <!-- 必须的 meta 标签 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 的 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <title>导航栏从左边滑出</title> </head> <style> @media (max-width: 768px) { .navbar-collapse { position: absolute; top: 54px; left: 0; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; width: 50%; } .navbar-collapse.collapsing { height: auto; -webkit-transition: left 0.3s ease; -o-transition: left 0.3s ease; -moz-transition: left 0.3s ease; transition: left 0.3s ease; left: -100%; } .navbar-collapse.show { background-color: aqua; left: 0; -webkit-transition: left 0.3s ease-in; -o-transition: left 0.3s ease-in; -moz-transition: left 0.3s ease-in; transition: left 0.3s ease-in; } } </style> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> </div> </nav> <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ --> <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 --> <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script> --> </body> </html> ```
推荐一个在线免费工具网站，简单，好用
2022-07-26 18:20:49 339
Go Redis Mysql Docker Jquery Nginx Bootstrap
网站有很多小工具，如pdf转word，word转pdf，pdf转图片，json格式化，js压缩和批量压缩，各种加解密，文字替换，还有编程笔试题等等， 我一直在使用这个网站，真的挺不错，界面简单没有其他花里花哨的。此网站后端使用Go、Redis、Mysql、Nginx、Docker搭建，前端使用Bootstrap、Jquery 等等 网站地址：www.zztdd.cn [工具地址](https://www.zztdd.cn)
文章分类
Go Python 自动化脚本 xTS(谷歌认证测试) Selenium 软件测试 Redis Mysql Docker MongoDB Jquery Nginx Bootstrap Linux 正则表达式 bat cmd批处理 截图
推荐文章
golang 对mysql数据库的常用操作 312 Go对手机号、银行卡、姓名等字符串做掩码处理 87 python + selenium + unittest 实现网站登录注册自动化测试 234 各系统截图快捷键汇总大全，包括windows、linux、mac、安卓、ios。 231 推荐一个在线免费工具网站，简单，好用 339
优选网站
在线JSON工具 在线音频提取 Linux在线大全 PDF转WORD TCP/IP端口大全