一、效果
image.png
二、代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>BootStrap导航栏</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">安卓</a></li>
<li><a href="#">苹果</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Windows
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Windows7</a></li>
<li><a href="#">Windows8.1</a></li>
<li><a href="#">Windows10</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="input-group">
<span class="input-group-addon">@</span>
<input list="lst" type="text" class="form-control" placeholder="Search" />
<datalist id="lst">
<option value="IE"></option>
<option value="Firefox"></option>
<option value="chrome"></option>
<option value="safari"></option>
</datalist>
</div>
<button class="btn btn-success" type="submit">search</button>
</form>
</div>
</nav>
</body>
</html>
三、参数说明
-
导航栏
.navbar——设置nav元素为导航条组件；
.navbar-default——指定导航条组件为默认主题；
.navbar-inverse——指定导航条组件为黑色主题；
.navbar-fixed-top——设置导航条组件固定在顶部；
.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；
.navbar-brand——设置导航条组件内的品牌图标；navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.
.navbar-nav——设置ul为导航条组件内的列表元素;还有
navbar-form
.navbar-left——设置导航条内元素向左对齐；
.navbar-right——设置导航条内元素向右对齐； -
输入框
input-group——一般包含一个输入框和一个图标。
input-group-addon——输入框前或后的图标
form-control——表单美化 -
按钮
button-group——按钮组，将多个按钮连载一起，左右有圆角效果 -
下拉菜单
dropdown
dropdown-toggle
data-toggle="dropdown"
dropdown-menu
.caret——下拉菜单的▼标志 -
其它
.container——自动，有点据中效果
.container-fluid——设置宽度充满父元素，即为100%。内容从左开始显示；
网友评论