Bootstrap4 导航条

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="resources/bootstrap-4.6.1-dist/css/bootstrap.css">

    <title>Navbar 导航条</title>
  </head>
  <body>
  	<p>包含所有子部件的导航条</p>
    <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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	    <span class="navbar-toggler-icon"></span>
	  </button>
	
	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	    <ul class="navbar-nav mr-auto">
	      <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="#">Link</a>
	      </li>
	      <li class="nav-item dropdown">
	        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
	          Dropdown
	        </a>
	        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
	          <a class="dropdown-item" href="#">Action</a>
	          <a class="dropdown-item" href="#">Another action</a>
	          <div class="dropdown-divider"></div>
	          <a class="dropdown-item" href="#">Something else here</a>
	        </div>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link disabled">Disabled</a>
	      </li>
	    </ul>
	    <form class="form-inline my-2 my-lg-0">
	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	    </form>
	  </div>
	</nav>
	
	<p>商标或者Logo Brand</p>
	<p>作为一个链接</p>
	<nav class="navbar navbar-light bg-light">
	  <a class="navbar-brand" href="#">Navbar</a>
	</nav>
	<p>仅展示</p>
	<nav class="navbar navbar-light bg-light">
	  <span class="navbar-brand mb-0 h1">Navbar</span>
	</nav>
	<p>logo图片</p>
	<nav class="navbar navbar-light bg-light">
	  <a class="navbar-brand" href="#">
	    <img src="resources/img/brand/bootstrap-solid.svg" width="30" height="30" alt="">
	  </a>
	</nav>
	<p>logo图片 + 文字</p>
	<nav class="navbar navbar-light bg-light">
	  <a class="navbar-brand" href="#">
	    <img src="resources/img/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
	    Bootstrap
	  </a>
	</nav>
	
	<p>导航文字</p>
	<nav class="navbar navbar-light bg-light">
	  <span class="navbar-text">
	    Navbar text with an inline element
	  </span>
	</nav>
	
	<p>导航颜色 .navbar-light是浅色  .navbar-dark是深色  可以使用.bg-*  也可以自定义颜色</p>
	<nav class="navbar navbar-dark bg-dark">
	  <span class="navbar-text">
	    Navbar text with an inline element
	  </span>
	</nav>
	<nav class="navbar navbar-dark bg-primary">
	  <span class="navbar-text">
	    Navbar text with an inline element
	  </span>
	</nav>
	<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
	  <span class="navbar-text">
	    Navbar text with an inline element
	  </span>
	</nav>
		
	<p>容器 使用.container不是必须的,但可以使用</p>
	<div class="container">
	  <nav class="navbar navbar-expand-lg navbar-light bg-light">
	    <a class="navbar-brand" href="#">Navbar</a>
	  </nav>
	</div>
	
	<p>固定在顶部 fixed-top</p>
	<nav class="navbar fixed-top navbar-light bg-light">
	  <a class="navbar-brand" href="#">Fixed top</a>
	</nav>
	
	<p>固定在底部 fixed-top</p>
	<nav class="navbar fixed-bottom navbar-light bg-light">
	  <a class="navbar-brand" href="#">Fixed bottom</a>
	</nav>
	
	<p>固定在顶部 随浏览器滚动 Sticky top 并非所有浏览器都支持</p>
	<nav class="navbar sticky-top navbar-light bg-light">
	  <a class="navbar-brand" href="#">Sticky top</a>
	</nav>
	
	<script src="resources/js/jquery-3.6.0.min.js" ></script>
	<script src="resources/bootstrap-4.6.1-dist/js/bootstrap.bundle.js" ></script>
  </body>
</html>
posted @   freepc  阅读(80)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示