Bootstrip学后见习

原创 2015年07月08日 15:42:59

最近学了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


见习大纲,csu,控制类

  • 2010年08月27日 15:21
  • 45KB
  • 下载

Javascript解析JSON 输出为bootstrip可用的特定格式的数据

后台程序处理输出数据: [{ "childrenDeps": [{ "childrenDeps": [{ "childrenDeps": null, "deptCode": nul...
  • phpfer
  • phpfer
  • 2015年09月21日 20:30
  • 344

见习工业工程师资格考试题

  • 2011年12月16日 18:47
  • 124KB
  • 下载

专业见习报告(automic)

  • 2011年06月03日 15:47
  • 30KB
  • 下载

大一见习自我感想

见习那些事                                                                         有识之士   见习那些事,我说说这两次参...

Bootstrip官网源代码

  • 2013年11月16日 13:54
  • 2.96MB
  • 下载

大二见习长沙中电软件园

见习长沙中电软件园感悟          刚从长沙见习回来,带着一颗空空的脑袋就去见习去了,专业知识学习也不扎实。给我留下印象最深的就是智能时代真的来了。由于学校组织的的活动有限,休息时间就和室友到...

ReactJS见习笔记

项目组要求用reactJs搭建前端页面,但是对react一点不了解,边推进项目边学习react。node.js, npm的关系Node.js 就是运行在服务端的 JavaScript。NPM是随同No...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrip学后见习
举报原因:
原因补充:

(最多只允许输入30个字)