Bootstrap导航条学习使用(二)
作者：轻扰时光 发布时间：2024-05-02 17:31:16
标签：Bootstrap,导航条
本文实例为大家分享了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>
效果图：
0
投稿猜你喜欢
- 我们做WEB程序开发过程中,经常会为了表格Table中的cellSpacing,cellpadding等样式的设置发愁,经常没有办法可想了,
0.引言利用python开发，借助Dlib库进行人脸识别，然后将检测到的人脸剪切下来，依次排序显示在新的图像上；实现的效果如下图所示，将图1- 样例：1.创建vue项目，不再详述2.引入vant之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完
- 简介对与控件QPushButton中的可以使用setStyleSheet设置它背景图片。具体设置背景图片的方法有两种self.button.
- 一、前言你知道当我们在网页浏览器的地址栏中输入 URL 时，Web 页面是如何呈现的吗？Web 界面当然不会凭空出来，根据 Web 浏览器地
- 前言 PCA降维，一般是用于数据分析和机器学习
- 在linux上想获取文件的元信息，我们需要使用系统调用lstat或者stat。在golang的os包里已经把stat封装成了Stat函数，使
- Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递但是如果是大中型项目中，很多时
- 写爬虫是一个发送请求，提取数据，清洗数据，存储数据的过程。在这个过程中，不同的数据源返回的数据格式各不相同，有 JSON 格式，有 XML
- plt.title() 是 matplotlib 库中用于设置图形标题的函数。一、基本语法如下plt.title(label, fontdi
- 最近在对接微信公众号、微信支付等功能，发现很多都是用xml格式的。在使用django日常处理的时候，都是手动拼接的，真的是很恶心。今天仔细的
- 使用循环神经网络(RNN)实现影评情感分类作为对循环神经网络的实践，我用循环神经网络做了个影评情感的分类，即判断影评的感 * 彩是正面的，还是
- 模块的的作用主要是用于字符串和文本处理，查找，搜索，替换等复习一下基本的正则表达式吧 .：匹配除了换行符以为的任意单个字符&nbs
- 一.查询第二个字母是t或者a的雇员的全部信息 select * from employees where fi
- 字体的处理在网页设计中无论怎么强调也不为过， 毕竟网页使用来传递信息的， 而最经典最直接的信息传递方式就是文字，&nbs
- go 简洁的并发多核处理器越来越普及。有没有一种简单的办法，能够让我们写的软件释放多核的威力？是有的。随着Golang, Erlang, S
- 什么是Matplotlib？Matplotlib是Python中的一个库，用于创建静态和动态动画，并使用其内置函数绘制。它有很多内置特性和内
- 为了分析深圳市所有长租、短租公寓的信息，爬取了某租房公寓网站上深圳区域所有在租公寓信息，以下记录了爬取过程以及爬取过程中遇到的问题：爬取代码
- DataTable dt = new DataTable(); dt = ds.Tables["All"].Clone(
- 这篇文章主要介绍了python 利用jinja2模板生成html代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考
