这一篇主要是补上源码，开始之前请先回顾：bootstrap学习笔记一： bootstrap初认识，hello bootstrap（上）
首先，我们的页面要求, lang,charset等就不用说了，老html属性， viewport是h5的属性，目的是
width=device-width 铺满设备宽度, initial-scale=1正常比较
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap theme --> <link href="css/bootstrap-theme.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/theme.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body role="document" style="zoom: 1;"> </body> </html>
很基本的页面元素，加上样式和CSS的引用，jquery一定要放前面哦
接下来往界面上添加导航：就是个nav标签，属于h5，看到more没有，那个就是可以下拉的
<!-- Fixed navbar --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">清友茶业</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li ><a href="demo.html">HOME</a></li> <li class="active"><a href="layout.html">布局</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">more <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="button.html">button</a></li> <li><a href="table.html">table</a></li> <li><a href="alerts.html">alerts</a></li> <li class="divider"></li> <li class="dropdown-header">分隔一下</li> <li><a href="progress.html">progress</a></li> <li><a href="list.html">list groups</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </nav>
再接下来，添加panel
<div class="page-header"> <h1>开始</h1> </div> <div class="row"> <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">热卖宝贝</h3> </div> <div class="panel-body"> setp1.为什么用bootstrap </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">收藏排行</h3> </div> <div class="panel-body"> setp2.bootstrap需要些什么 </div> </div> </div><!-- /.col-sm-4 --> <div class="col-sm-4"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">新品上架</h3> </div> <div class="panel-body"> setp3. bootstrap 布局 </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">好评最多</h3> </div> <div class="panel-body"> setp4. bootstrap themes,从导航开始 </div> </div> </div><!-- /.col-sm-4 --> <div class="col-sm-4"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">掌柜排荐</h3> </div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">活动宝贝</h3> </div> <div class="panel-body"> Panel content </div> </div> </div><!-- /.col-sm-4 --> </div>
如果你够细心，你看发现一个重点，这个真的是重点，什么呢，class="row"和 class="col-sm-4" ,col是在row里面，而且一个row里面有3个col-sm-4，那有没有col-sm-1,2,3,5。。。呢，有的
在这里就是bootstrap的布局的，这里有t的是fix布局，bootstrap把页宽为成12份，col-sm-4就是占4份的宽度，随着浏览器宽度的变化，比如页面的宽度这时候只有4-7个宽度，那么就会变成一个个panl往下铺。bootstrap最伟大的发明就是这个，有了这个功能，就能实现pc，平板，手机等共用一个页面，而显示不同的效果
当然，布局远不仅如果，后面我们会有专门一个文章去讲
我们继续贴上轮播的代码,轮播放的图片一定要大小一样，特别是高度。如果不一样你会发现页面跳动，在这里我们不建议把高度设计，因为图片是会随浏览器大小缩放的，你设定了，会有问题
<div class="page-header"> <h2>图片轮播</h2> </div> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://gdp.alicdn.com/imgextra/i3/2194223167/TB2mZpkcVXXXXXgXpXXXXXXXXXX_!!2194223167.jpg" alt="First slide"> </div> <div class="item"> <img src="http://gdp.alicdn.com/imgextra/i4/2194223167/TB2.QtpcVXXXXcFXXXXXXXXXXXX_!!2194223167.jpg" alt="Second slide"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
感谢那段：class="well"
<div class="page-header"> <h1>感谢 Thankyou</h1> </div> <div class="well"> <p> 福鼎白茶具有地域唯一、工艺天然和功效独特等特性。白茶性清凉，消热降火，消暑解毒。清代周亮工的《闽小记》载：“白毫银针，产太姥山鸿雪洞，其性寒凉，功同犀角，是治麻疹之圣药。” 欧美国家对白茶研究发现，相比其他茶类，白茶的自由基含量最低，黄酮含量最高，氨基酸含量平均值高于其他茶类，降血压、降血脂、降血糖、抗氧化、抗辐射、抗肿瘤，人体免疫力细胞的干扰素分泌量增加5倍等。 </p> </div> <article> <p>白茶的自由基含量最低，黄酮含量最高，氨基酸含量平均值高于其他茶类。而且福鼎白茶具有清热祛火的功效，白茶提取物对引起葡萄球菌感染、链球菌感染、肺炎等细菌生长具有预防作用。福鼎白茶的自由基含量最低，喝红葡萄酒饮白茶，一红一白结合，福鼎白茶可以解决饮用红葡萄酒容易上火的难题，可以说是现代成功人士社交应酬的好伴侣。[1] 对于福鼎白茶独特而显著的保健功效，可以用五种茶来形容：</p> <p>①降火消炎茶：白茶具有清热祛火的功效，同时最新研究还表明，白茶提取物对导致葡萄球菌感染、链球菌感染、肺炎等细菌生长具有预防作用。</p> <p>②女人茶：白茶的自由基含量最低，多喝白茶或使用白茶的提取物，可以延缓衰老，美容美颜，因此受到了现代时尚人士，特别是都市女性的欢迎。</p> <p>③伴侣茶：喝红葡萄酒饮白茶，“一红一白”结合，白茶可以解决饮用红葡萄酒容易上火的难题，可以说是现代成功人士社交应酬的好伴侣。</p> <p>④梦之茶：白茶可以清热降火，让人清心除烦、安神定智，有助于人们获得健康良好的睡眠。</p> <p>⑤旅行茶：白茶具有耐泡的特点，一天旅途一杯茶，可以很好地缓解或消除旅行中的疲劳。</p> </article>
大家可能注意到有个article标签，对，就是用来排版文章，是h5的标签，他具体能达到怎样效果，我也没吃透，大家一起学习，知道的留言教一下
页脚：
<footer> <p style="text-align:center">© Company 2015</p> </footer>
整个页面就是这样子，相当的简洁啊，下一篇文章我们会重点讲下bootstrap的而已，这前面都是让大家了解bootstrap能做什么，至于源码我就不发了，自己一步步来写，印象会更深刻，哪怕你被卡在了哪一块。
by the way:
别忘了收藏我的淘宝店铺：福鼎清友茶业，福鼎白茶专卖店，更有8.9包邮啊，老婆说，广告一定要打，要不然不让我写。说我天天这么晚，碰键盘比碰她还多的多。