Bootstrap前端UI工具包学习笔记

　　　　刚刚接触到Bootstrap的前端工具包，对于我们这些做后台程序开发的，如果要做出美观的UI，真的是赶鸭子上架，太难了。不过Bootstrap可以解决这一难题，看到讲解这方面资料的东西不多，绝大多数还需要去阅读英文资料，虽然不难，但是难免有英文比较差的朋友。在这我就大概把Bootstrap所有我个人觉得常用的讲解一下，也是学习笔记。下面附图就是我学习中的实例图。

　　　　怎么样，如果专心排版，你几乎不用写一行css代码，部分用行内样式表就可以做出不错的网站UI。

　　　　废话不说了，开始吧。引入Bootstrap相关文件，bootstrap/js/jquery.min.js bootstrap/css/bootstrap.min.css bootstrap/css/bootstrap-responsive.min.css 

bootstrap/js/bootstrap.min.js主要就是这四个文件，加载进来以后就可以开始写了。都写在body标签之内哦。

<div class="container">

　　　　<div class="row"><!--row-fluid可以表示自动百分比-->
                 <div class="span4">1</div>
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
</div>

　　　　这就是一个简单的一行三列排版，以后排版都写在 类container这个标签里面 这个类换成container-fluid类就是那种按照浏览器比例的相对布局，每一列布局都是用<div class='row'>开始，然后在里面写上列的布局，这里类可以换成row-fluid也表示相对布局，列布局类span1-12就是把一个整行分成了12列，你可以任意组合，只要结果是12即可。

布局就这么简单，以后代码尽量都是在这些布局列里面写。

　　　　1.字体效果，这里有好几种，比如<h1>到<h6>，字体越来越小，颜色也是有变化的，这和默认不同的。

<strong>标签就是黑体字比较大，<em>是斜体字，<abbr title='描述' class='initialism'>带描述title属性 initialism类用来转换成大写</abbr>

<blockquote class="pull-right">用于显示引用内容<small>有特殊用处</small></blockquote>注意一下pull-left类用于左边显示。

差不多字体控制就这几种，里面有一个特殊显示小图片的就是i标签，使用例子<i class="icon-pencil"></i>就是编辑图标。

　　　　2.3种列表显示就是ol ul dl分别没有多少修改，<ul class="unstyled">用于去除默认样式，<dl class="dl-horizontal">用于标题内容同一行显示。其他效果需要自己写css控制了。

　　　　3.表格效果<table class="table table-striped table-bordered table-condensed">这些类我们可以只用其中一个或者全部，不过建议全部用上，没啥说的，这样自动会隔行变色等。

　　　　4.表单效果，这个算是最复杂的，比较多，主要说说按钮，它可以使用a button标记来制作按钮，按钮类都是btn开始，用于颜色控制的有六种，具体代码看我的例子，里面基本包括了所有样式实例，还有一种就是标签颜色，和按钮类似不多说了。

　　　　5.菜单效果，这也是真复杂的，里面有下拉菜单，切换tab分格，以及比较好用的顶端菜单，上面截图绿色的就是。具体看我的附件代码段。

　　　　6.js效果，这里有图片轮换效果，遮罩层效果，以及其他动画效果，提示等等，都是比较常用的效果，需要Jquery代码，我的附件里面基本也都是有的。

　　　　7.最后总结一下，我没有具体讲解，不过我的附件里面效果都有了，基本上是Bootstrap全部内容，不过要想布局出漂亮的UI，还是需要一番功夫的，要看你的审美观了。里面颜色都是可以配置的。

　　　　附件下载，包括了Bootstrap包了。

　　　　地址https://files.cnblogs.com/logoove/Bootstrap.rar

（原创文章 By Yoby）