<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scaleable=no">
<title>响应式表单</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background:#e6e6e6;">
<div>
<p>.dropdown-menu 给下拉列表中的内容 给ul 加样式</p>
<p>.dropdown包含触发的按钮和下拉列表加样式 -- 父元素</p>
<p>data-toggle 按钮的触发器</p>
<p>.dropdown-menu-left 下拉列表的对齐 .dropdown-menu-right 下拉列表右对齐</p>
<p>.divider 给li标签加，之间没有内容</p>
</div>
<h3 class="page-header">下拉列表</h3>
<div class="dropdown ">
<button class="btn btn-default" data-toggle="dropdown">
登录<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">qq登录</a></li>
<li las="divider"></li><!--分割线 <li></li>标签中间没有内容-->
<li><a href="#">微信登录</a></li>
<li><a href="#">手机登录</a></li>
<li><a href="#">邮箱登录</a></li>
<li><a href="#">微博登录</a></li>
</ul>
</div>
<p>.nav是标签页的一个基类，给ul加</p>
<p>.nav-tabs普通标签页</p>
<p>.nav-pills胶囊式标签页</p>
<p>.nav-stacked垂直排列，给ul加</p>
<p>.active给li加，默认显示该内容</p>
<h3 class="page-header">标签页1：普通式</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">home</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">,essages</a></li>
</ul>
<h3 class="page-header">标签页2:胶囊式</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">home</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">,essages</a></li>
</ul>
<h3 class="page-header">标签页3</h3>
<ul class="nav nav-pills nav-stacked"><!--纵向的-->
<li class="active"><a href="#">home</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">,essages</a></li>
</ul>
<h3 class="page-header">导航</h3>
<p>navbar是导航栏的一个基类，给nav元素加</p>
<p>.navbar-default 导航栏默认样式，由于nav元素</p>
<p>.container是nav元素的子元素，导航栏内容都放入其中</p>
<p>.navbar-header 导航栏头部样式</p>
<p>.navbar-inverse 颜色取反</p>
<p>.collapse是折叠导航栏样式的基类，给ul父元素加<br>
.navbar-collapse是折叠导航栏的样式，给ul父元素加<br>
.nav是导航栏的链接基类,给ul加<br>
.navbar-nav是导航栏的链接样式,给ul加<br>
.navbar-left或.navbar-right组件排列，导航链接，按钮或文本对齐<br>
.navbar-fixed-top导航栏固定在顶部，用于nav标签，需要为body设置padding-top:70px;<br>
.navbar-fixed-bottom导航栏固定在底部，用于nav元素<br>
</p>
<nav class="navbar navbar-default nav-fixed-top navbar-inverse">
<div class="container text-success">
<!--页面的头部-->
<div class="navbar-header">
<a href="#"><img src="logo.jpg" height="50" width="70"></a>
</div>
<!--导航链接-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">home首页</a></li>
<li><a href="#">home视频</a></li>
<li><a href="#">home内容</a></li>
<li><a href="#">home导航</a></li>
</ul>
</div>
</div>
</nav>
<!--固定到顶端,.navbar-fixed-bottom固定到底部，颜色取反-->
<div class="container">
<h3>云计算</h3>
<p>s如何简化云服务的交付？11月，英特尔福利大放送，为您提供用于帮助您<br>简化云路径的资源、用于奠定云环境基础的技术、以及可交付优化云解决方案的领先合作伙伴关系。只要您点击加入英特尔商用中心，成用户注册后，<br>即可免费领取云计算精选资源，还有精美礼品可以领取哦</p>
<h3>云计算</h3>
<p>s如何简化云服务的交付？11月，英特尔福利大放送，为您提供用于帮助您<br>简化云路径的资源、用于奠定云环境基础的技术、以及可交付优化云解决方案的领先合作伙伴关系。只要您点击加入英特尔商用中心，成用户注册后，<br>即可免费领取云计算精选资源，还有精美礼品可以领取哦</p>
<h3>云计算</h3>
<p>s如何简化云服务的交付？11月，英特尔福利大放送，为您提供用于帮助您<br>简化云路径的资源、用于奠定云环境基础的技术、以及可交付优化云解决方案的领先合作伙伴关系。只要您点击加入英特尔商用中心，成用户注册后，<br>即可免费领取云计算精选资源，还有精美礼品可以领取哦</p>
<h3>云计算</h3></p>
</div>
</div><!--container-->
</body>
</html>
