一、Bootstrap特点
Bootstrap主要做了两件事。一是将经常使用的css样式、js效果组件化。使开发人员用更少的代码实现所需的效果。将基本的精力由繁琐的细节中解放出来。二是实现响应式布局，bootstrap集成的组件都考虑到了页面在pc、平板、手机上的适应性，可依据屏幕大小自己主动调整布局。
二、Demo入门
最后的效果
放缩浏览器宽度，页面元素会自己主动调整位置
当视口宽度小于978px时，将由水平排列调整为单列显示：
遇到的问题
关于组建的具体介绍。能够查看官方文档，下面为学习过程中的一些issue
1.组件效果与官方的实例不一致
同一浏览器chrome45，以本地方式查看和服务端方式查看同一份代码，效果不同。firefox和IE11试过，也一样。例如以下所看到的：
由此能够推測。可能是路径问题导致。可是让人奇怪的是，css文件有引入，给导航栏navbar使用contain-fluid样式，也能正常的居中。
梳理下思路，由本地訪问没有问题排除css文件错误；由部分css样式能起作用，可知css引入正常。排除域、部署路径与文件路径不同的嫌疑；由css样式与js分析，排除网页禁止js文件导致。前提同一份代码，同版本号的浏览器。甚至浏览器的进程都是同一个，排除浏览器版本号问题。
//TODO，如今能想到的还剩一个嫌疑，webstorm版本号太低（8.0.3），内部处理时有误。
此问题遗留。
2.图片选择
由于是自己学习使用，图片素材都是百度所得。拿到的图片各式各样，在放到网页上时，遇到有的图片像素大，一张就撑爆整个网页，有的像素太小，填不满所给的空间。解决的方法是给图片添加样式width:100%.
解决宽度后，发现图片的高度也不统一。得到的元素高低不平，难看。分析后决定调整图片本身。将须要保持一致的图片切成一样的宽高比。之所以不用css来改变高度。是由于图片被拉伸、压缩后会变形，影响效果。
3.网页中的留白
流式布局中。不同元素之间留白与否会对视觉效果产生较大影响。导航栏与正文之间不留白，页面各元素间，以及页面底部留白。
间距50px左右。使用元素的margin外补或父元素的padding内补。
4.弹出框dialog
一般放在body元素中，避免放在其它元素时。因其它元素的遮挡导致无法弹出。
三、主要代码
需引入js/jquery-1.12.2.min.js、js/bootstrap.min.js 和css/bootstrap.min.css文件才可正常显示。
现代浏览器博物馆
Chrome 主流浏览器
Google Chrome，又称谷歌浏览器。是一个由Google（谷歌）公司开发的免费网页浏览器。
Firefox 主流浏览器
Mozilla Firefox。中文俗称“火狐，是一个自由及开放源码网页浏览器
Safari 主流浏览器
Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器
Opera 主流浏览器
Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器
IE 非标准浏览器
Internet Explorer。是美国微软公司推出的一款网页浏览器。
Internet Explorer使用了Trident排版引擎，差点儿完整支持HTML 4.01。CSS Level 1、XML 1.0和DOM Level 1，仅仅是有一些排版错误。</p> </div> </div> </div> </div> </div> <hr class="divider"/> <footer> <p class="pull-right"><a href="#top">回到顶部</a></p> <p>@ 2016 Dream</p> </footer> </div> <!--模态框--> <div class="modal fade" id="about"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">关于</h4> </div> <div class="modal-body"> <p>提示信息，广告招商，征婚启事，大力金刚丸！
</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script src="js/jquery-1.12.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('#demo-navbar .dropdown-menu a').click(function(){ var href = $(this).attr('href'); $('#tab-list a[href="'+href+'"]').tab('show'); }); }); </script> </body> </html>