Bootstrap 4:响应式导航栏如何在合适宽度折叠?

Bootstrap 4:响应式导航栏

如何使用Bootstrap 4设计响应式导航栏呢?最直接的方法就是到Bootstrap Documentation中找到提供组件的代码,再进行自定义修改。链接如下:Navbar. Bootstrap v4.5

示例代码如下:

<body>
<nav class="navbar navbar-expand-lg navbar-light">
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
		<span class="navbar-toggler-icon">span>
	button>
	<div id="navbarNav" class="collapse navbar-collapse">
		<ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link" href="#">Home<a>
			li>
			<li class="nav-item">
				<a class="nav-link" href="#">About<a>
			li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contact<a>
			li>
		ul>
	div>
nav>

	<script src="jquery-3.5.1.min.js">script>
	<script src="bootstrap.min.js">script>
body>
  • nav标签的.navbar-expand-lg类指定导航栏在指定断点(breakpoint)发生折叠,lg表示断点为991px;
  • button标签中的data-toggle="collapse"表示按钮引用bootstrap的collapse插件,data-target则指定折叠的对象,这里指定对象是id为navbarNav的div标签。

未折叠时(页面宽度≥992px),效果如下:
未折叠时
折叠时(页面宽度<992px),效果如下:
折叠时
使用时有几点要注意:

  • button上的汉堡包形状来自,如果未指定nav标签的navbar-light类,可能无法看到。
  • 记得在后面添加jQuery.js和bootstrap.js,否则没有动画效果

你可能感兴趣的:(Web,#,Bootstrap,bootstrap,html,html5,css)