积跬步,聚小流------Bootstrap学习记录(1)

1、什么是bootstrap?

2011年8月    Twitter推出的    开源的    整套前端解决方案

简单了说:用以创建web页面的html、css、javascript的前端工具集

再简单了说:给相应的结构写好了相应的样式和行为,直接调用即可,是我这等弱设计,配色盲来说的福音,在这些样式的渲染下,想弄难看了,估计设计、配色和bootstrap的应用都得达到一定境界。

2、bootstrap的发展目标

bootstrap是为了提高内部分析的管理能力,解决内部协调性和工作效率而诞生的

据说它的口号是“Designed for everyone,everywhere ”(适用于任何场景,适用于每一个人)

3、bootstrap的优势

* 优雅的界面

bootstrap3用了当下最流行的扁平化设计,除了清新明快的配色,简约大气的设计之外,优化了网站的加载速度,也有利于SEO搜索引擎搜索

* 灵活的组件

“以移动设备优先”的响应式设计,方便简洁的栅格系统布局,用LESS构建的样式,让样式编写更快更灵活

* 可扩展性

定制的jquery插件和不断完善的库,还有最关键的,它是开源的,众人的力量是难以想象的

* 简化工作

它提供了样式化的文档,多人开发中也能保证样式规范,另外,大厂出品和开源这一系列因素,也代表了它久经考验,可以有效的减少测试的工作量,

站在巨人的肩上,不用重复造轮子是多么幸福的事情啊

4、bootstrap存在的弊端

1、兼容性

虽然bootstrap在主流浏览器和移动端都有很好的兼容性,但是是以几乎完全放弃了IE7及以下版本为代价的,而万恶的IE问题还是当前前端的一大主流

问题

2、各版本之间

2013年8月20号bootstrap3正式上线,而它的风格与bootstrap2风格完全不同,从2.0到3.0的切换非常之大

bootstrap作为当下流行的前端框架,虽然不可避免的存在着不足和欠缺,但是它的优雅和便捷仍然决定了它的受欢迎程度,所以前端的小伙伴们还是快点动起来吧。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-10 21:06:31

积跬步,聚小流------Bootstrap学习记录(1)的相关文章

积跬步,聚小流------Bootstrap学习记录(3)

响应式作为Bootstrap的一大特色.栅格系统可谓是功不可没,既然如此,那我们就来看一下栅格系统是怎样帮助bootstrap实现响应式布局的呢? 1.什么是栅格系统 我们能够从Bootstrap的官网上找到比較官方的回答:Bootstrap提供了一套响应式.移动设备优先的流失栅格系统,随着屏幕或视口(viweport)的添加,系统会自己主动分为最多12列. 它包括了易于使用的提前定义类,还有强大的mixin用于生成更具语义的布局. 这样的说法是比較精准并且明了的.可是还能够更通俗一点的来解释:

不积跬步无以至千里----高度自适应的textarea

在某个项目里面,有这样的一个小需求. textarea的高度自适应,当高度高于300px之后,textarea高度不再增高,出滚动条.当高度小于某个高度例如80px的时候,高度不再变小. 其实这个需求在很多地方都有出现过,例如微博的评论框,还有各种评论框. 谈不上什么有难度的技术,写下来当一个小插件积累. <!doctype html> <html> <head> <meta charset="utf-8"> <title>高

技术成长-不积跬步无以至千里

走在开发的道路上,你会发现越走路越长,越走路上的坑越多.本人是想在成长的道路上多踩一些坑的,踩的坑越多,遇到问题解决速度越快.坑多了,可能自己都记不住了,就需要记一记,有些时候你遇到的坑采用的解决办法并不是最优解,所有需要拿出来跟小伙伴一起分享分享你的经验. 记录到比如印象笔记或者有道云笔记里,或者自己的一个文件夹里,不过,个人经验,记在文件夹后很少有人再去看,还是记在印象笔记或者有道云笔记里,可以帮助自己随时翻看.现在的流程是重要的时候记录在有道云笔记上,做个索引,然后印象笔记记录的是我再找对

积跬步,聚小流-------几种方法实现分割线

其实这个问题想了实现了有一段时间了,只是单纯自己想了个办法简单实现了效果,没想出太多办法来,最关键的是,我也不知道这原来是叫"分割线",只知道是什么样,连搜都不着知道怎么搜,赶巧今天碰到了,就学习了下,先来描绘下要实现的"分割线"效果. 对,就是这个效果,记住了,这叫"分割线"... 最开始反应过来的是层叠起来实现效果,也是之前一直在用的方法 <hr width="80%"/> <div style=&quo

积跬步,聚小流------关于手机号,前端应该注意哪些

现代的网上商城中越来越多的开始使用手机注册,方便,快捷,然后作为前端,也就不可避免的要在界面上碰到关于手机号的问题,今天小小总结一下该注意哪些问题,又该来如何实现呢? 1.实现效果 先把自己当前做出来的效果传上来看下: (备注:这里的手机号码是我随便输了一个,如果真有这个号码受到了骚扰,别怪我啊,噗噗...) 2.需要注意的问题 这里我们来简单罗列下需要注意的问题吧: * input输入框,只能输入数字: * 输入过程中下方同步显示所输入的内容: * 判断输入手机号是否格式正确: * 判断手机归

积跬步,聚小流-------js实现placeholder的效果

前几天在"技术问答"上问了问题,然后有回复一句话就给概括了:placeholder的效果,不得不说,了解的多了才能说起来言简意赅,用最简单的语言描述最清晰的表达. 但是placeholder属于html5新添加的属性,兼容性还存在问题,查阅思考后,用js实现了它的实现效果. 先来看一下实现效果: 输入密码的时候 这就实现了效果了啊,然后呢,你发现上下图的区别了么,是不是一下子就想到了实现的方法,是的,就这么简单,来简单说一下是实现的原理: 在"登录邮箱"下,放两个i

积跬步,聚小流-------一个登录中的知识点

前几天心血来潮,做了一个登录界面,发现虽然是简单的一个登录,容纳的知识点倒是不少呢. 先来看下简单的效果: 那就来简单说下,都设计了哪些知识点呢? 首先:居中:这里我使用的是绝对位置的负距离实现居中,也就是说position为absolute,而left和top都为50%,而margin-left和margin-top都为width和height的一半的值的相反数 #back_login{ width: 400px; height: 500px; background-color: #fffff

积跬步,聚小流------oracle便捷修改整行数据

随着知识了解的越来越多,也越来越多的发现了自己的不足,简单记录下这次学到的知识吧. 尽管项目中都是用的oracle,但是实际上对于oracle的应用却不是很足,比方说,如果我查一个表中的数据,例: 这时候的这两条数据是我录入的测试数据,现在我想进行删除操作,可能我很快就能想到相应的sql语句: delete from arc_tobaccotechnician where name like '%是否%' 首先说这是对的,并且是非常快捷的,但是如果测试数据的共同点并不是那么好找呢,或者其它sql

积跬步,聚小流------oracle快捷添加测试数据

前一阵子在实施中发现问题,需要当时进行修改,而因为数据库中数据是真实数据,不能进行修改,否则会出大纰漏吧,于是添加测试数据来方便修改,而单个添加效率太低下了,所以解决的办法就是以真实的数据为模板增添新方便删除的数据即可,就像将2014年的数据复制一份只将年份进行修改,删除的时候讲这个不存在的年份数据删除即可. 相信大家很容易会想到这个方法,也很容易做出答案,举个例子: 看这个表,因为主键中都是以当年年份开头的,同时年度也是当年年份,这样我们就可以进行添加修改: 假使说这个表格存在如下列: btf