首页 > 代码库 > bootstrap学习8-输入框和导航栏组件
bootstrap学习8-输入框和导航栏组件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>输入框和导航栏组件</title>
<link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:50px;">
<!--导航条组件
nav
navbar 基本样式
navbar-default 基本情景
navbar-header 标题头
navbar-brand 标题
navbar-nav
active 首选项
disabled 禁用
navbar-right 右边
navbar-left 左边
navbar-form 导航条表单
navbar-btn 按钮
navbar-text 文字
navbar-link 链接（必须放在text中）
navbar-fixed-top 固定到顶部
navbar-fixed-bottom 固定到底部
navbar-static-top 静态导航和页面等宽
-->
<nav class="nav navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="http://www.mamicode.com/#" class="navbar-brand">标题</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.mamicode.com/#">首页</a></li>
<li><a href="http://www.mamicode.com/#">产品</a></li>
<li class="disabled"><a href="http://www.mamicode.com/#">咨询</a></li>
<li><a href="http://www.mamicode.com/#">关于</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">$</span>
</div>
</form>
<button class="btn btn-default navbar-btn navbar-left">按钮</button>
<p class="navbar-text">我是一段文字<a href="" class="navbar-link">链接</a></p>
</div>
</nav>
<p>2</p><p>3</p><p>4</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>6</p><p>4</p>
<!--
input-group 分组
input-group-addon 添加值和属性
form-control 表单基本样式
-->
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" />
</div>
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">$</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" />
<span class="input-group-addon">$</span>
</div>
<div class="input-group">
<span class="input-group-addon"><input type="checkbox"/></span>
<span class="input-group-addon"><input type="radio"/></span>
<input type="text" class="form-control" />
<span class="input-group-addon">$</span>
</div>
<div class="input-group input-lg ">
<span class="input-group-btn">
<button class="btn btn-default">按钮</button>
</span>
<input type="text" class="form-control" />
</div>
<div class="input-group input-lg ">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button class="btn btn-default">下拉菜单</button>
<button class="btn btn-default" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="http://www.mamicode.com/#">1</a></li>
<li><a href="http://www.mamicode.com/#">2</a></li>
<li><a href="http://www.mamicode.com/#">3</a></li>
<li><a href="http://www.mamicode.com/#">4</a></li>
</ul>
</div>
</div>
<!--
nav 导航栏样式
nav-pills 胶囊式导航
nav-tabs实现标签的导航
nav-stacked 垂直式导航
nav-justified 导航栏两端对齐
disabled 禁用
-->
<ul class="nav nav-pills">
<li><a href="http://www.mamicode.com/#">首页</a></li>
<li><a href="http://www.mamicode.com/#">咨询</a></li>
<li><a href="http://www.mamicode.com/#">产品</a></li>
<li><a href="http://www.mamicode.com/#">关于</a></li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="http://www.mamicode.com/#">首页</a></li>
<li><a href="http://www.mamicode.com/#">咨询</a></li>
<li><a href="http://www.mamicode.com/#">产品</a></li>
<li><a href="http://www.mamicode.com/#">关于</a></li>
</ul>
<ul class="nav nav-pills nav-tabs nav-justified">
<li class="active"><a href="http://www.mamicode.com/#">首页</a></li>
<li><a href="http://www.mamicode.com/#">咨询</a></li>
<li class="dropdown">
<a href="http://www.mamicode.com/#" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="http://www.mamicode.com/#">1</a></li>
<li><a href="http://www.mamicode.com/#">2</a></li>
<li><a href="http://www.mamicode.com/#">3</a></li>
<li><a href="http://www.mamicode.com/#">4</a></li>
</ul>
</div>
</li>
<li><a href="http://www.mamicode.com/#">关于</a></li>
</ul>
<!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://www.mamicode.com/js/bootstrap.min.js"></script>
<script src="http://www.mamicode.com/js/jquery.min.js"></script>
</body>
</html>
bootstrap学习8-输入框和导航栏组件