原文:bootstrap源码学习与示例:bootstrap-button

今天开始说非常简单的bootstrap button组件。 button设计得非常smart,只有一个调用接口,你可以在 .button str 中传入不同的字符串,来切换它的文本,其中有三个是框架占用的 toggle, reset, loading。 button的文本切换是通过data xxx text自定义属性控制。 .button xxx ,就是取data aaa text的值作为新文本。 ...

2012-12-20 16:06 1 6842 推荐指数:

查看详情

bootstrap源码学习示例bootstrap-transition

虽然是基于不纯的目的来学习它,但想必也对大家有所帮助。 bootstrap虽然挂着twitter的名字,但实质上只是twitter的两个员工自己的项目。 bootstrap不是单纯一个项目,它的许多部件,包括CSS部分,JS部分,还是最原始的less部分要依赖其他项目才能运作。不过CSS已经有 ...

Thu Dec 20 21:43:00 CST 2012 4 7364
bootstrap源码学习示例bootstrap-scrollspy

bootstrap-scrollspy(滚动侦测)是一个很有趣的组件,它会将某一个存在滚动条的区域中一些元素的ID值收集起来,然后在它们靠近滚动区顶部时高亮这些ID值代表的A元素。 它也明显的缺陷,对格式限得太死。它由两部分组成。一部分是滚动区,滚动区有个data-target用于指向包含菜单 ...

Sat Dec 22 00:04:00 CST 2012 2 10595
bootstrap源码学习示例bootstrap-alert

bootstrap-alert组件基本活儿在CSS上,JS部分就是一个关闭事件。这是框架提供的关闭事件,在这之前,你可以通过on方法绑定close,closed这两种回调,它会在关闭时被调用。基本上,你只要引入了JS文件,HTML按它格式要求写,它就能干活了。 需要注意的有两个: 关闭铵 ...

Fri Dec 21 01:39:00 CST 2012 2 11114
bootstrap源码学习示例bootstrap-modal

bootstrap-modal译为模态对话框,也就是带遮罩层的对话框。 从它的源码实现来看有点罗索。 它的HTML结构分三分部,首部,内容区,底层,底部放按钮或分页栏。 <div class="modal hide fade"> <div class ...

Sat Dec 22 22:46:00 CST 2012 0 14370
bootstrap源码学习示例bootstrap-collapse

这次说的是手风琴组件,但是bootstrap的实现有点奇怪,CSS中的类名以accordion为前缀,JS里面的处理组件与相关方法为collapse。 HTML结构以下:类名accordion的DIV包含N个类名为accordion-group的DIV,每组又分两部分 ...

Mon Dec 24 03:31:00 CST 2012 4 8464
bootstrap源码学习示例bootstrap-carousel

bootstrap的旋转木马组件,不过只能自动从左到右,而且与其他组件不一样,需要自己手动初始化一下。 结构还是算简单, <div id="myCarousel" class="carousel slide"> <div class ...

Mon Dec 24 16:06:00 CST 2012 1 7840
bootstrap源码学习示例bootstrap-popover

bootstrap-popover是bootstrap-toolbar的子类。它就比toolbar多一个content参数,其他就是一些默认值不同。与toolbar一样没有自定义事件。 名称 类型 默认 描述 ...

Tue Dec 25 02:09:00 CST 2012 1 9284
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM