Bootstrip学后见习

最近学了H5+CSS3+JS不过个人觉得还是提高的空间，特别是JS。这两天在学Bootstrip。主要的学习地方是在汇智网。在这里先感谢下，我也推荐新手可以去学。可以一边学习一边手动编码，加深印象。

 Bootstrip其实主要就是对CSS的封装。而我们只需导入连接<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">。或者在项目中导入一些库。也就是下载下来再把文件放到项目中去而已。

由于Bootstrip中的class样式太多，我在这边也就把一些自己有记的写下并且有的会有详细说明，免得搞得太高深似的，关键点搞清楚后想想“其实也就那样！”。后面如果需要用到并且没有的话，查查应该都能搞定。

Action:

首先来看下栅格参数，个人认为这些还是比较重要的。

按照设备的优先级排列列数,xs>sm>md>lg。

.col-xs-12参数说明，col是显示列,xs是指设备,12指一行最多只能12列，如果超过12则把剩余的列数在下一行显示，以此类推。如果小于12则浮动显示→把下一行追加到当前行的后面显示。本人在汇智网测试结果。只有xs属性能体现出来，其他的都无效(该测试只是在汇智网，其他的地方没测过)。

列排序中的push-*跟pull-*是指推、拉多个列占位数。（前面有说到一行最多12列）。push为往右移动*个占位，也就是让左边剩下*个占位，同样，有push就要有pull，作用就跟push相反。

<mark>属性中的文字那块的背景会改成其他颜色，我自己看的时候是黄色，有点看不清。

该标签的显示结果是在<del>属性内的文字中间加一条横线。说明是被删除的。

上面两种属性显示的结果都是在文字底部加一条横线，只是一个在本身的文字下面加，一个是外来添加进来的。看上去都没多大区别。

这跟css中的属性一样，不过上面说font-weight是这bootstrip中的class封装。

这个嘛。。。貌似跟CSS中的一样，很少用到，所以我也不太清楚。

引用，添加<footer>用于标明引用来源，来源名称可以包裹进<cite>标签中，下面一张图是其显示结果

这是缩写，当鼠标移到attr文字时，鼠标有出现带问号的图标并且会显示出title属性里的完整单词。Title属性必须要设置，如果再加上class=”initialism”属性则会把attr字体变成大写。下面一张图为显示结果

这个label标签在bootstrip中的作用还是比较大的，个人觉得设置label标签还是需要滴，如果不想显示的话可以在属性中添加class="sr-only"把文本掩藏。

为输入框后面添加额外的图标，通过更改中间那个属性来改变图标。Glyphicon-ok为打钩，glyphicon-warning-sign为警告，glyphicon-remove为打叉。下面显示一种结果

另外还有种在前面也显示自己定义的图标内容。先看下显示结果

然后再看下其实现的代码

其实也就是在输入框的前面添加一个<span>标签，标签内的元素为class="input-group-addon"需要显示的效果就是@那个符号。 注意，这些标签都要在同一个div标签中才行，并且div的class属性要为input-group。在这里再提前告知读者，我们可以把@符号改成按钮框、单选框、复选框、以及下拉列表框等等都是可以的。自己可以试试！

这里我都将代码以及结果都一起贴出来了。而且在代码块中还表明了实现的样式。我们可以用这些样式试用在进度条中哦，或者其他地方。我在这里特别想说的是，用在进度条的效果。如果读者有玩过游戏，指的是有显示带血量的。可以发现这里设置进度条跟游戏中的血量条显示的效果是一样的。比如血量80%以上显示为绿色，60%~79.99%为黄色，59.99%以下为红色。是不是感觉自己也能做血量的感觉呀！！！

-xs、-sm、-md、-lg除了可以设置按钮不同尺寸外还能设置其他的标签的大小，比如输入框，显示框等。貌似设置字体大小可以用class="text-xs"。。。

PS：如有不对的，还望指出。在这里不胜感激！！！

                                                                       ----------菜鸡ing