这一篇主要是补上源码，开始之前请先回顾：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包邮啊，老婆说，广告一定要打，要不然不让我写。说我天天这么晚，碰键盘比碰她还多的多。
时间： 2024-08-02 02:49:44