欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap 4.0 导航栏自适应

程序员文章站 2022-03-09 12:27:19
...

1.重要的属性类

navbar-expand-md   , collapse navbar-collapse 保证切换适配。和切换显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <!-- meta使用viewport以确保页面可*缩放 -->
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
	<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="title" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!--你自己的样式文件 -->
    <!-- <link href="css/soy.css" rel="stylesheet">         -->
	
</head>
<body>
	<div id="">
		
		<!-- 头部 header - start -->
		<div class="container" style="">
			<nav class="navbar navbar-expand-md navbar-light bg-faded">
				<a class="navbar-brand" href="#">Navbar</a>
			    <!-- <a class="navbar-brand" href="#">Navbar</a> -->
			    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-expanded="false">
			    	&#9776;
			    </button>
			  
				<!-- 切换菜单内容 -->
				<div class="collapse navbar-collapse" id="exCollapsingNavbar">
					<ul class="nav 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" href="#">About</a>
				    </li>
				  </ul>
				</div>
				<!-- 切换菜单内容 -->
			  
		  	  <form class="form-inline navbar-form pull-right collapse navbar-collapse">
			    <input class="form-control" type="text" placeholder="Search">
			    <button class="btn btn-success-outline" type="submit">Search</button>
			  </form>
			</nav>
		</div>
		<!-- 头部 header - end -->
		
		<!-- 中部 content - start -->
		<div class="" style="">
		    <div class="jumbotron">
			  <div class="container">
			    <h1 class="display-3">Fluid jumbotron</h1>
			    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of it's parent.</p>
			    <form class="form-inline navbar-form pull-right  navbar-collapse">
				  <input class="form-control" type="text" placeholder="Search">
				  <button class="btn btn-success-outline" type="submit">Search</button>
				</form>
			  </div>
			</div>
		</div>

		<div class="container">
			<ol class="breadcrumb">
			  <li class="active">Home</li>
			</ol>
			<ol class="breadcrumb">
			  <li><a href="#">Home</a></li>
			  <li class="active">Library</li>
			</ol>
			<ol class="breadcrumb" style="margin-bottom: 5px;">
			  <li><a href="#">Home</a></li>
			  <li><a href="#">Library</a></li>
			  <li class="active">Data</li>
			</ol>
		</div>
		
	</div>

<!-- 引入 js 库 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/sy_m.js"></script>
</body>
</html>

 

相关标签: bootstrap