Bootstrap导航条学习使用(二)
作者：轻扰时光 时间：2024-05-02 17:31:16
本文实例为大家分享了Bootstrap导航条实现的具体代码，供大家参考，具体内容如下
navbar-header：导航的头部，一般情况下用来放置logo
navbar-brand ：用来放置logo，需要配合navbar-header使用
具体代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
<!--有链接和文字的导航条-->
<nav class="navbar navbar-default">
<div class="container"><!--将外围的div放在nav标签里面-->
<div class="navbar-header">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">logo</a><!--navbar-brand 用来放置logo的-->
</div>
<ul class="nav navbar-nav">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
</ul>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-link navbar-text">链接</a><!--navbar-link为导航里的链接-->
<p class="navbar-text">这里是一段文字</p><!--navbar-text为导航里的文字-->
<ul class="nav navbar-nav navbar-right"><!--右对齐，而navbar-left为左对齐-->
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a></li>
</ul>
</div>
</nav>
<!--有表单的导航条-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">logo</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
</ul>
<button class="btn btn-default navbar-btn navbar-left">搜索</button>
<form action="URL" class="navbar-form navbar-left"><!--navbar-form是在导航条里添加表单，navbar-left使表单左浮动，使其与其他内容在一行显示-->
<input type="text" class="form-control"/>
<button class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a></li>
</ul>
</div>
</nav>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
效果图：
标签：Bootstrap,导航条
0
投稿猜你喜欢
Python如何执行系统命令
2021-09-25 05:49:02
python 同时运行多个程序的实例
2021-03-25 07:36:20
JavaScript利用Canvas实现粒子动画倒计时
2024-04-16 09:37:52
使用Python发送邮件附件以定时备份MySQL的教程
2024-01-18 00:28:48
python基础之引用和匿名函数
2023-01-13 11:52:42
用MySQL做站点时如何记录未知错误的发生
2010-09-30 14:11:00
git_stats web代码图形统计工具详解
2023-10-29 23:16:03
javascript实现表格增删改操作实例详解
2024-04-29 13:24:36
灵活运用Python 枚举类来实现设计状态码信息
2023-04-29 15:03:34
SQL Server中identity(自增)的用法详解
2024-01-24 22:33:50
设计72变——寻求banner制作的变化
2009-11-12 12:56:00
python爬虫调度器用法及实例代码
2023-02-15 08:54:21
带你理解vue中的v-bind
2023-07-02 16:52:44
pygame游戏之旅 调用按钮实现游戏开始功能
2023-04-19 06:36:44
TensorFlow实现Softmax回归模型
2023-07-14 19:07:51
python实现爱奇艺登陆密码RSA加密的方法示例详解
2022-02-10 00:41:53
SQL Server数据库的高性能优化经验总结
2024-01-18 17:04:55
浅析Python 实现一个自动化翻译和替换的工具
2021-12-03 20:48:25
Python爬取豆瓣数据实现过程解析
2022-01-27 09:12:20
Yii使用find findAll查找出指定字段的实现方法
2024-05-03 15:13:37