如何免费制作一个公司网站,极速网站建设服务商,最好网站建设公司运营团队,美橙互联网站建设Bootstrap5 导航
Bootstrap5提供了一种简单快捷的方法来创建基本导航#xff0c;它提供了非常灵活和优雅的选项卡和Pills等组件。Bootstrap5的所有导航组件#xff0c;包括选项卡和Pillss#xff0c;都通过基本的.nav类共享相同的基本标记和样式。 创建基本导航 要创建简单…Bootstrap5 导航
Bootstrap5提供了一种简单快捷的方法来创建基本导航它提供了非常灵活和优雅的选项卡和Pills等组件。Bootstrap5的所有导航组件包括选项卡和Pillss都通过基本的.nav类共享相同的基本标记和样式。 创建基本导航 要创建简单的水平菜单可以将.nav类添加到ul元素然后为每个li元素添加.nav-item并将.nav-link类添加到它们的链接元素。
ul classnavli classnav-itema classnav-link href#首页/alili classnav-itema classnav-link href#学习/alili classnav-itema classnav-link href#前端/alili classnav-itema classnav-link href#禁用/ali
/ul导航对齐 默认情况下导航是左对齐的可以使用flexbox实用程序添加.justify-content-center类使导航居中添加.justify-content-end类使导航右对齐。
ul classnav justify-content-centerli classnav-itema classnav-link href#首页/alili classnav-itema classnav-link href#学习/alili classnav-itema classnav-link href#前端/alili classnav-itema classnav-link href#禁用/ali
/ul垂直导航栏
ul classnav flex-columnli classnav-itema classnav-link href#首页/alili classnav-itema classnav-link href#学习/alili classnav-itema classnav-link href#前端/alili classnav-itema classnav-link href#禁用/ali
/ul选项卡 使用类.nav-tabs添加到基本导航来生成选项卡式的导航并将.active类添加到活动/当前链接。
ul classnav nav-tabsli classnav-itema classnav-link active href#首页/alili classnav-itema classnav-link href#学习/alili classnav-itema classnav-link href#前端/alili classnav-itema classnav-link href#禁用/ali
/ul创建Pills导航 可以通过在基本导航上添加类.nav-pills来创建基于Pills的导航
ul classnav nav-pillsli classnav-itema classnav-link active href#首页/alili classnav-itema classnav-link href#学习/alili classnav-itema classnav-link href#前端/alili classnav-itema classnav-link href#禁用/ali
/ul响应式导航栏 响应式导航栏在手机等小视口的设备上会折叠但当用户单机切换按钮时会展开。但是它在中型和大型设备例如笔记本电脑或台式机上将正常显示为水平。 通过类.navbar可以创建一个标准的导航栏若要创建响应式的导航栏可以在类.navbar的基础上添加类.navbar-expand-xxl|xl|lg|md|sm来创建大屏幕水平铺开小屏幕垂直堆叠。 导航栏上的选项卡可以使用ul元素并添加classnavbar-nav类。然后再li元素上添加.nav-item类a元素上使用.nav-link类。
nav classnavbar navbar-expand-sm bg-lightul classnavbar-navli classnav-itema classnav-link active href#首页/alili classnav-itema classnav-link href#学习/alili classnav-itema classnav-link href#前端/alili classnav-itema classnav-link href#禁用/ali
/ul垂直导航栏 删除.nav-expand-*类可创建始终垂直的导航栏
nav classnavbar bg-lightul classnavbar-navli classnav-itema classnav-link active href#首页/alili classnav-itema classnav-link href#学习/alili classnav-itema classnav-link href#前端/alili classnav-itema classnav-link href#禁用/ali
/ul彩色导航栏 可以使用.bg-color类来更改导航栏的背景颜色.navbar-dark类为导航栏中的所有链接添加白色文本颜色或使用.navbar-light类添加黑色文本颜色。
nav classnavbar bg-dark navbar-darkul classnavbar-navli classnav-itema classnav-link active href#首页/alili classnav-itema classnav-link href#学习/alili classnav-itema classnav-link href#前端/alili classnav-itema classnav-link href#禁用/ali
/ul
/nav品牌/标志 .navbar-brand类用于突出显示页面的品牌/标志/项目名称
nav classnavbar navbar-expand-sm bg-dark navbar-darkdiv classcontainer-fluida classnavbar-brand href#Logo/a/div
/nav固定导航栏 导航栏也可以固定在页面的顶部或底部。固定导航栏会在独立于页面滚动的固定位置顶部或底部保持可见。.fixed-top类使导航栏固定在页面的顶部.fixed-bottom类把导航栏停留在页面底部.
nav classnavbar navbar-expand-sm bg-dark navbar-dark fixed-topdiv classcontainer-fluida classnavbar-brand href#Logo/a/div
/nav导航栏粘在顶部 使用.navbar元素上的.sticky-top类来创建随页面滚动知道到达顶部然后停留在那里的粘性顶部导航栏。
div classp-5 bg-warningh1Hello/h1
/div
nav classnavbar navbar-expand-sm bg-dark navbar-dark sticky-topdiv classcontainer-fluida classnavbar-brand href#Logo/a/div
/nav
