input-group输入框组
input-group-btn添加额外的按钮
input-group-addon添加额外的符号
nav nav-tabs 添加为导航
active激活状态
nav-pills设置胶囊状
nav-stacked垂直导航
nav标签 设置导航条
navbar-default导航条默认颜色
navbar-header导航条头部
navbar-brand导航条头部文字的样式
icon-bar面包屑
data-toggle="collapse"导航条功能
data-target="#aa"绑定子导航栏
navbar-toggle导航条头部图标位置
collapse隐藏
avbar-fixed-top固定导航条在顶部
navbar-fixed-bottom固定导航条在底部
navbar-inverse导航条反色
navbar-form导航条中表单
navbar-right|left 导航条中的浮动 大于等于768才生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7-dist/css/bootstrap.css"/>
<title></title>
</head>
<body style="height: 2000px;">
<!-- input-group输入框组 -->
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-3">
<div class="input-group">
<!-- input-group-btn添加额外的按钮
input-group-addon添加额外的符号-->
<span class="input-group-btn">
<button class="btn btn-success" type="button">按钮</button>
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-3">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="a">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-3">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="a">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown" type="button">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</span>
<input type="text" class="form-control" name="" id="" value="" />
</div>
</div>
<hr >
<!-- nav nav-tabs 添加为导航-->
<!-- active激活状态 -->
<!-- nav-pills设置胶囊状 -->
<!-- nav-stacked垂直导航 -->
<ul class="nav nav-tabs">
<li class=""><a href="#">Home</a></li>
<li class="active"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-tabs nav-justified">
<li class=""><a href="#">Home</a></li>
<li class="active"><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-tabs nav-pills nav-stacked">
<li class="disabled"><a href="#">Home</a></li>
<li class="active"><a href="#">Profile</a></li>
<li>
<a class="btn btn-default dropdown-toggle"
data-toggle="dropdown" href="#">
Messages
<span class="caret"></span>
</a>
<ul class="dropdown-menu btn-block">
<li><a href="">111</a></li>
<li><a href="">222</a></li>
</ul>
</li>
</ul>
<hr >
<!-- nav标签 设置导航条 -->
<!-- navbar-default导航条默认颜色 -->
<!-- navbar-header导航条头部 -->
<!-- navbar-brand导航条头部文字的样式 -->
<!-- icon-bar面包屑 -->
<!-- data-toggle="collapse"导航条功能 -->
<!-- data-target="#aa"绑定子导航栏 -->
<!-- navbar-toggle导航条头部图标位置 -->
<!-- collapse隐藏 -->
<!-- navbar-fixed-top固定导航条在顶部
navbar-fixed-bottom固定导航条在底部-->
<!-- navbar-inverse导航条反色 -->
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#aa"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<!-- 菜单 -->
<img src="../jq代码/zysy/zhonnanya.png" >
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="aa">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
<p class="navbar-text">Signed in as Mark Otto</p>
<!-- navbar-form导航条中表单 -->
<!-- navbar-right|left 导航条中的浮动 大于等于768才生效-->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
<script src="../../bootstrap-3.3.7-dist/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</html>