Bootstrap3学习笔记

Bootstrap3学习笔记

javascript good parts这本书里面说到,页面布局和展示效果的事情都交给css样式去实现,js主要负责前端用户界面交互,动态效果和前后端数据同步。

bootstrap是前端css样式方面的一个库,使用它可以很好的替代传统的美工和ui设计师,让前端可以做出一个比较美观的页面和交互。

官网:http://getbootstrap.com/

中文网站:http://www.bootcss.com/,这个网站访问比较方便而且是中文文档说明。

bootstrap4刚刚出来,用的人还不多,bootstrap3现在是是主流。

使用bootstrap的过程中,要注意一个问题。

因为bootstrap已经给我们提供了各种各样的效果class和组件,所以尽量在bootstrap库里面寻找我们需要的东西,而不是自己从头重新创造一个。

下面我们来浏览一下如何学习bootstrap3

bootcss.com网站进入以后按bootstrap3中文文档,就可以看到和标题类似的页面。

在这个bootstrap3中文文档页面上面,导航栏包括起步,全局CSS样式,组件,JavaScript插件,定制,网站实例。下面按照这个脉络来大致讲解。

起步

这里面主要说的是如何安装如何下载如何编译和一些基本的信息。

下载,通过npm安装,通过bower安装,编译 Less/Sass 源码需要注意的事项。

全局CSS样式

设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。

从bootstrap2到bootstrap3,移动设备友好性增强了。

从桌面优先 (Desktop First)的设计方式,变成和Zurb的 Foundation 一样的移动优先 (Mobile First) 全新的栅格系统 (Grid System),更加强大!

再见,IE7!最低从IE8开始支持。而且因为设计已经变成移动优先,所以对IE8的支持也需要respond.js。

而刚出来的bs4 beta版本,已经放弃了IE8。

所有元素默认盒模型(box model)使用了border-box,注意,实现的方法是非常暴力的设置 * { box-sizing: border-box },理由呢,就是方便计算,方便使用grid system。实际上很可能在和第三方其他的UI库合并使用时产生问题,毕竟现代浏览器的标准默认box model是 content-box。

按钮控件去除光泽和阴影,简而言之就是更加扁平了。(有人说,这是简洁就是美,也有人说是作者没有时间去打磨好只好采用这种扁平化设计)

内置的ICONS不再纠结大小和颜色,放在白色底就是黑色,非半色底就是白色。

大家有一个共同的感觉,从Bootstrap2.x升级到Bootstrap3.x真的很困难,有人说基本上就是重新写一个网站,想想看是不是很恐怖的工作量。

所以bootstrap3一般先在后台自己人使用的web站点使用,而在前端面向广大互联网客户的使用方面比较落后大多数还是bootstrap2.x,毕竟很多网站要考虑兼容IE7甚至IE6,是不是很变态?

我原先使用bs2.x的一个web app,换成bs3.x,出现了一个问题,jquery multiselect和multifilter的控件出现了异常现象,出现的下拉选择框都跑到页面底部去了,原先就在按钮的地方展开。

bs3也有扩展的组件,bs-multiselect(下面还会提到),还不知道有没有bs-multifilter.  这个问题不解决,升级bs3就是吃力不讨好了。

bs2的时候,原先的对话框模态框使用jquery-ui的比较多,也有一部分webapp使用bs2里面的modal,以后要不要全部换成bs的modal呢?这都是升级到bs3带来的工作量。

组件

无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

JavaScript插件

这个部分主要讲各种jQuery插件如何和bootstrap一起很好的使用。

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到你的页面中。

除了常见的那些组件以外,还需要平时积累一些强大组件的bs兼容版本,以便在真正构建网页的时候得心应手。

下面是bootstrap版本的multiselect,看起来很美,但是没有实现multifilter.

http://jquery-plugins.net/bootstrap-multiselect

定制

通过自定义 Bootstrap 组件、Less 变量和 jQuery 插件,定制一份属于你自己的 Bootstrap 版本吧。

有人把JqueryUI和BS一起做了一个定制版本的库。

http://www.bootcss.com/p/jquery-ui-bootstrap/

网站实例

这部分是各种优秀的bs应用实例,大家可以看看人家是怎么设计出来很漂亮的效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容