Ruby's Louvre

每天学习一点点算法

导航

2012年12月20日 #

bootstrap源码学习与示例：bootstrap-dropdown

摘要： bootstrap-dropdown组件是个烂东西，我读后的整体感觉。一个下拉开菜单的设计： <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a 阅读全文

posted @ 2012-12-20 22:43 司徒正美 阅读(17934) 评论(4) 推荐(4)

bootstrap源码学习与示例：bootstrap-alert

摘要： bootstrap-alert组件基本活儿在CSS上，JS部分就是一个关闭事件。这是框架提供的关闭事件，在这之前，你可以通过on方法绑定close,closed这两种回调，它会在关闭时被调用。基本上，你只要引入了JS文件，HTML按它格式要求写，它就能干活了。需要注意的有两个：关闭铵钮必须带data-dismiss="alert"属性关闭时事件必须要绑定在UI容器上，而不是关闭按钮中!function ($) { "use strict"; // jshint ;_; /* ALERT CLASS DEFINITION * =============== 阅读全文

posted @ 2012-12-20 17:39 司徒正美 阅读(11595) 评论(2) 推荐(0)

bootstrap源码学习与示例：bootstrap-button

摘要： 今天开始说非常简单的bootstrap-button组件。button设计得非常smart，只有一个调用接口，你可以在$().button(str)中传入不同的字符串，来切换它的文本，其中有三个是框架占用的——toggle, reset, loading。button的文本切换是通过data-xxx-text自定义属性控制。$().button("xxx")，就是取data-aaa-text的值作为新文本。如果要还原最初状态，使用$().button("reset")。loading参数会在这基础上添加disabled类名与disabled属性，目的是不 阅读全文

posted @ 2012-12-20 16:06 司徒正美 阅读(7310) 评论(1) 推荐(1)

bootstrap源码学习与示例：bootstrap-transition

摘要： 虽然是基于不纯的目的来学习它，但想必也对大家有所帮助。bootstrap虽然挂着twitter的名字，但实质上只是twitter的两个员工自己的项目。bootstrap不是单纯一个项目，它的许多部件，包括CSS部分，JS部分，还是最原始的less部分要依赖其他项目才能运作。不过CSS已经有合并版了，JS我们也只需要导入jQuery。因此想跟着学习的人，到这里把源码部分CSS下载回来，jQuery使用1.83就行了。或者搭建以下这样的架子：<!DOCTYPE html><html> <head> <title>bootstrap学习 by 司徒正美 阅读全文

posted @ 2012-12-20 13:43 司徒正美 阅读(7834) 评论(4) 推荐(2)