仿牌外贸网站制作,怎么样做短视频,常州网红餐厅,外贸自建站是什么意思1.响应式导航栏介绍
响应式导航栏是一种在不同设备和屏幕尺寸下自适应布局和显示的导航栏。它可以根据用户所使用的设备#xff08;如桌面电脑、平板电脑或手机#xff09;自动调整其外观和交互方式#xff0c;以提供更好的用户体验。
pc端#xff1a; 手机端#xff1a…1.响应式导航栏介绍
响应式导航栏是一种在不同设备和屏幕尺寸下自适应布局和显示的导航栏。它可以根据用户所使用的设备如桌面电脑、平板电脑或手机自动调整其外观和交互方式以提供更好的用户体验。
pc端 手机端 2.BootStrap实现
最简单的方式是使用Bootstrap 框架它提供了响应式的导航栏组件Navbar在电脑端显示为完整的导航栏而在移动端则会以可展开的按钮形式呈现。
在 Bootstrap 中创建一个响应式导航栏需要使用以下组件和类
nav 元素用于定义导航栏的容器。.navbar 类应用于 nav 元素表示它是一个导航栏组件。.navbar-expand-* 类用于控制导航栏在不同屏幕大小下的展开方式。* 可以是 sm小屏幕、md中屏幕、lg大屏幕或 xl超大屏幕。.navbar-toggler 类用于创建导航栏的可展开按钮。.collapse 类用于定义可折叠的导航栏内容。.navbar-collapse 类应用于包含导航栏内容的容器与 .collapse 类一起使用。
以下是一个示例代码展示了如何使用 Bootstrap 创建一个响应式导航
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.csstitleResponsive Navbar/title
/head
body
nav classnavbar navbar-expand-sm navbar-dark bg-darka classnavbar-brand href#Logo/abutton classnavbar-toggler typebutton data-togglecollapse data-target#navbarContentspan classnavbar-toggler-icon/span/buttondiv classcollapse navbar-collapse idnavbarContentul classnavbar-navli classnav-item activea classnav-link href#Home/a/lili classnav-itema classnav-link href#About/a/lili classnav-itema classnav-link href#Services/a/lili classnav-itema classnav-link href#Contact/a/li/ul/div
/navscript srchttps://code.jquery.com/jquery-3.5.1.slim.min.js/script
script srchttps://cdn.jsdelivr.net/npm/popperjs/core2.5.4/dist/umd/popper.min.js/script
script srchttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js/script
/body
/html
效果 3. 原生基于Flex布局实现
这里使用了media来查询媒体的最大宽度并以此改变样式再使用flex弹性布局实现响应式导航栏
!DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1style/* 全局样式 */body {margin: 0;padding: 0;font-family: Arial, sans-serif;}/* 导航栏样式 */.navbar {display: flex;justify-content: space-between;align-items: center;background-color: #333;color: #fff;padding: 10px;}.navbar-brand {font-size: 1.5rem;color: #fff;text-decoration: none;}.nav-button {display: none;float: right;}.navbar-nav {display: flex;flex-flow: row wrap;list-style-type: none;margin: 0;padding: 0;}.nav-item {margin-left: 10px;}.nav-link {color: #fff;text-decoration: none;}/* 媒体查询 */media (max-width: 768px) {.navbar {flex-flow: row wrap;justify-content: space-between;}.nav-button {width: 20%;display: block;}.navbar-brand {width: 80%;}.navbar-nav {display: flex;flex-direction: column;align-items: center;width: 100%;}.nav-item {margin: 10px 0 0 0;}}/styletitleResponsive Navbar/title
/head
body
nav classnavbara classnavbar-brand href#Logo/abutton classnav-button onclickshow()展开/buttonul classnavbar-nav idnavsli classnav-itema classnav-link href#Home/a/lili classnav-itema classnav-link href#About/a/lili classnav-itema classnav-link href#Services/a/lili classnav-itema classnav-link href#Contact/a/li/ul
/nav
/body
scriptconst show () {let navs document.getElementById(navs);if(navs.style.display none){navs.style.display flex;}else{navs.style.display none;}}
/script
/html
效果和bootstrap效果一样就是按钮我只用了文字没有加上icon
