bootstrap下载：http://v3.bootcss.com/getting-started/
bootstrap中文文档：http://www.bootcss.com/
jquery下载：http://jquery.com/download/
工具：HBuilder
下面是我刚学习的例子，主要是熟悉bootstrap自带的class.
login.html内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/mybs.css"/>
<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
<!-- 使用bootstrap.min.js必须先引入jquery.min.js,可以到jquery官网下载最新的 -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>
<!--
导航栏
navbar-fixed-top: 上下滚动的时候，永远显示在顶部
-->
<nav class="nav navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!--
设置隐藏按钮，跟下面的隐藏内容对应，当像素小于768px,会触发这个隐藏按钮
-->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">
<!-- 导航航默认高度是50px，所以注意图片的height -->
<img src="img/logo.png" style="height: 50px;margin-top: -15px;" />
</a>
</div>
<!--
当浏览器窗口缩小的时候，隐藏这部分内容
-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">首页</a></li>
<li><a href="">笑话</a></li>
<li><a href="">文章</a></li>
<!--
下拉菜单
-->
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">
编程
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="">Python</a>
<ul class="dropdown-menu">
<li><a href="">python_1</a></li>
<li class="divider"></li>
<li><a href="">python_2</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="">C++</a></li>
</ul>
</li>
</ul>
<div class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入关键字" />
<div class="input-group-btn">
<button class="btn btn-block">
<span class="glyphicon glyphicon-search">搜索</span>
</button>
</div>
</div>
</div>
<div class="form-group">
<a href="" class="navbar-link">登录</a>
<span style="color: darkgrey;">|</span>
<a href="" class="navbar-link">注册</a>
</div>
</div>
</div>
</div>
</nav>
<div style="height: 50px;"></div>
<!-- 用户登录表单 -->
<div class="container" >
<h1 class="page-header"><span class="glyphicon glyphicon-user">用户登录</span></h1>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="用户名/Email" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="password" class="form-control" placeholder="密码" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<button class="btn-primary">登录</button>
</div>
</div>
</form>
</div>
<div style="height: 60px;"></div>
<div class="container">
<!-- Tab标签 -->
<div class="row">
<div class="col-md-6">
<ul id="mytab" class="nav nav-tabs">
<li class="active">
<!-- 两个tab标签-->
<a href="#xw1" data-toggle=‘tab‘>新闻1</a>
</li>
<li>
<a href="#xw2" data-toggle=‘tab‘>新闻2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id=‘xw1‘>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-1</span></p>
</div>
<div class="tab-pane fade" id=‘xw2‘>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
<p><a href="">openstack百花争鸣</a><span class="pull-right">2015-10-2</span></p>
</div>
</div>
</div>
</div>
<!-- 面包屑导航 -->
<div class="row">
<div class="col-md-12">
<ul class="breadcrumb">
<li><a href="">开发语言</a></li>
<li><a href="" class="text-muted">web应用</a></li>
</ul>
</div>
</div>
</div>
<!-- 缩略图 -->
<div style="height: 60px;"></div>
<div class="container">
<div class="row">
<!-- bootstrap中一行只能包含12个列，多余的列会另起一行 -->
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h3><a href="http://www.cloud.net">云官网</a></h3>
<p>创业公司</p>
</div>
</div>
</div>
<!--
网格系统
-->
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h3><a href="http://www.cloud.net">云官网</a></h3>
<p>创业公司</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h3><a href="http://www.cloud.net">云官网</a></h3>
<p>创业公司</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h3><a href="http://www.cloud.net">云官网</a></h3>
<p>创业公司</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h3><a href="http://www.cloud.net">云官网</a></h3>
<p>创业公司</p>
</div>
</div>
</div>
<div class="col-md-4">
<!--
嵌套网格
-->
<div class="col-md-6">
<div class="thumbnail">
<img src="img/logo.png"/>
<div class="caption">
<h3><a href="http://www.cloud.net">云官网</a></h3>
<p>创业公司</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="page-header">
<h2>openstack介绍</h2>
</div>
<p>openstack介绍</p>
</div>
</div>
</div>
</div>
<!-- tab触发切换 -->
<script type="text/javascript">
//$(‘#mytab a[href="#xw2"]‘).tab(‘show‘);
//$(‘#mytab a:last‘).tab(‘show‘);
//$(‘#mytab li:eq(0) a‘).tab(‘show‘);
$(‘#mytab‘).on(‘shown.bs.tab‘,function(e){
var txt=$(e.target).attr(‘href‘);
var pretxt=$(e.relatedTarget).attr(‘href‘);
$(txt).html($(pretxt).html());
//$(‘#xw2‘).html(‘yao‘);
})
</script>
</body>
</html>本文出自 “the-way-to-cloud” 博客，请务必保留此出处http://iceyao.blog.51cto.com/9426658/1683418
原文：http://iceyao.blog.51cto.com/9426658/1683418