bootstrap-datetimepicker 日历选择,可选择到分

项目地址:http://www.malot.fr/bootstrap-datetimepicker/
中文文档:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

开始使用
首先引入插件css、js及中文包




1、最简单的使用,所有设置都未默认

$("#datetimepicker").datetimepicker();

2、添加参数

$("'#datetimepicker").datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认值: 'mm/dd/yyyy'
        weekStart : 0, //一周从哪一天开始。0(星期日)到6(星期六),默认值0
        startDate : "2013-02-14 10:00",//可以被选择的最早时间
        endDate : "2016-02-14 10:00",//可以被选择的最晚时间
        daysOfWeekDisabled : "0,6",//禁止选择一星期中的某些天,例子中这样是禁止选择周六和周日
        autoclose : true,//当选择一个日期之后是否立即关闭此日期时间选择器
        startView : 2,//点开插件后显示的界面。0、小时1、天2、月3、年4、十年,默认值2
        minView : 0,//插件可以精确到那个时间,比如1的话就只能选择到天,不能选择小时了
        maxView:4,//同理
        todayBtn : true,//是否在底部显示“今天”按钮
        todayHighlight : true,//是否高亮当前时间
        keyboardNavigation : true,//是否允许键盘选择时间
        language : 'zh-CN',//选择语言,前提是该语言已导入
        forceParse : true,//当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中
        minuteStep : 5,//分钟的间隔
        pickerPosition : "bottom-right",//显示的位置,还支持bottom-left
        viewSelect : 0,//默认和minView相同
        showMeridian : true,//是否加上网格
        initialDate : "2015-02-14 10:00"//初始化的时间
});

参考:
Bootstrap的日期选择插件DateTime Picker增强版

Bootstrap通用工具样式整理

有些时候使用bootstrap时,只用到其栅格、响应式等功能,不用其使用样式表现、如按钮、导航样式等。简单的思路是将其做为一个基础的css来引用,类型之前做页面之前先引用一个reset.css。

哈哈,有点杀鸡用牛刀的感觉。好吧,本文就是整理了一些bootstrap的定义过的通用样式,例如清除活动(.clearfix),在你使用的时候就不用重新定义了。

1、从浮动开始吧。
对于内容浮动,一般会有3种需求(左浮动、右浮动、居中对齐),另外还有一种清除浮动需求。
对于左右浮动,分别定义了pull-left和pull-right样式。
清除活动,定义了clearfix样式。

2、层居中对齐、内容区域居中
就是一个层水平居中显示,使用.center-block样式即可,其定义原理是让左右外边距均为auto即可。

3、显示或隐藏内容
通过.show 和 .hidden可以强制显示或隐藏任一页面元素(包括在屏幕阅读器上)。这两个class使用了!important以避免冲突。
可以使用.invisible将一个元素的可见性设为不可见,仍然可以影响文档流中的元素。
使用.sr-only可以针对除了屏幕阅读器之外的所有设备隐藏一个元素。

4、图片替换文字
使用.text-hide 样式可以将页面元素所包含的文本内容替换为背景图。举个例子:网站logo,使用背景图片,添加这个属性后会把文字隐藏掉。

5、响应式图片
通过添加.img-responsive 样式可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%;和height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸。

6、无样式列表
使用.list-unstyled 样式移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。简而言之就是去掉了列表项前面的空白及默认样式。

7、dl列表显示在一行
.dl-horizontal样式可以让dl内短语及其描述排在一行。

8、文字对齐
.text-left 文字左对齐
.text-center 文字左对齐
.text-right 文字左对齐

9、按钮
.btn-lg 大按钮(Large button)
.btn-sm 小按钮(Small button)
.btn-xs 最小按钮(Extra small button)
.btn-block 占一整行的按钮,将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

使用 Bootstrap 的 11 大理由

Bootstrap,作为创新技术框架,使开发者、设计者更容易、更快捷、更出色地完成网站及应用的搭建工作。如果你还没有使用Twitter Bootstrap,建议你去了解一下。Bootstrap为开发者提供了众多工具。

项目地址:http://twitter.github.io/bootstrap/

国内镜像地址:https://code.csdn.net/OS_Mirror/bootstrap

Bootstrap之所以广泛流行,其深受欢迎的原因是什么呢?

1.节省时间

利用Bootstrap,你将有更多的时间用来挣钱。Bootstrap库中包含很多现成的代码片段,这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码,只需找到合适的代码,插入到合适位置即可。此外,CSS利用LESS编写,很多样式和设计都已设计完成。

2.定制化

Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分,抛弃不需要的。Bootstrap整体允许你根据自己的需要,裁剪自己开发的项目。

Bootstrap 定制工具集锦:http://www.iteye.com/news/28092

3.设计方面的因素

网格系统

对页面进行布局时,往往需要有一个合适的网格。你不一定使用该平台的网格,但它确实能大大降低你工作的难度。默认模式下,该平台提供一个16列的网格(宽为960px)。每列宽40px,每列左右两侧具有10px的间隙,各网格最外侧均留出20px的空白。你可以根据需要改变行数与间隔大小。样式已开发完成,开发者只需要把合适的代码放入HTML合适的位置即可。

LESS

LESS在开发周期内应用很广。它是一种基于CSS之上的高级语言,其目的是使得CSS开发更灵活和更强大。你可以利用LESS的Mixins及CSS操作定制内嵌网格。Bootstrap采用了大量流行的CSS3功能,可以对所有的网站提供统一的浏览体验。

JavaScript

Bootstrap提供JavaScript库,该库超越了基本的架构与样式。通过Bootstrap,开发者可能很容易地操作窗口警告框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是,它可以让你不必再费神费力地写脚本。

4.一致性

Twitter当初开发该工具的最主要原因是,开发者所开发项目在不同浏览器间的不一致性。这就导致了很多前端开发与最终用户界面之间的问题。Bootstrap保证了界面在不同平台上的统一性。在IE、Chrome及Firefox中,你可以看到统一的界面。

5.更新

以jQuery 的UI为例:每一年更新一次。而Bootstrap则在不停地改进,更具规律性与持续性。Web开发者一发现新问题, Bootstrap团队便立刻着手修复它。

6.集成

如果你想进一步完善一个已完成的网站,Bootstrap可以帮助你。例如,如果你要统一使用自己编写的表格样式,你要做的是把你的样式复制到CSS样式文件中。Bootstrap将立即剔除它本身的样式,在这里,你需要将该文件与Twitter进行关联。集成的过程十分简单、方便、快捷。完成之后,你便可以把你的设计应用到你的核心内容上。

7.响应式

Bootstrap为响应式框架。无论你的开发工作从笔记本转移到iPad,还是从iPad转移到Mac上,你都不用为你的工作而苦恼。因为Bootstrap能以超快的速递与效率适应不同平台间的差异。

8.对未来技术具有兼容性

Bootstrap包含很多特殊元素,如HTML5和CSS3,这些元素被称为设计的未来。因为该框架考虑到设计和开发的未来,它很有潜力成为未来几年里Web开发者的参考标准。

9.竞争力

Bootstrap并不是唯一的前端开发框架,比如还有JQuery UI、HTML5 Boilerplate等等。但对于Bootstrap来说,真正的竞争对手是Zurb Foundation。Bootstrap 2新增加了一个工具集,Foundation经过好长时间才填补上。Bootstrap包含大量的第三方插件、主题、功能特性、代码等等,而Foundation并不具备这些。

10.详尽的说明文档

Bootstrap的文档相当精彩。大部分新平台往往没有合适的说明文档,而Bootstrap的说明文档大大帮助了我们的入门学习。通过文档可以找到我们需要的所有信息。

11.让老板们受益

学习Bootstrap,并不会花费你太多时间,因为它将所有的模块化方法与体系结构封装在了一起。从老板的角度来看,如果你为Web开发者提供了Bootstrap框架,那么他们会节省更多的学习时间,并快速投入到工作中。这会为老板们带来更好的收益。

如果你觉得Bootstrap确实对你有帮助,你可以访问twitter.github.com/bootstrap/查看该框架。你也可以下载编译版本,或获取包含CSS和JavaScript文档的Bootstrap源文件。(编译/陈秋歌 审校/夏梦竹)

原文来自:sitepoint

bootstrap布局问题小记

最近使用bootstrap做一些页面,没有设计图根据简要的word方案说明做静态页是挺费劲的,当然这样做的速度会快一些。自己用的后台,对美观要求不高,就这样来吧。速度为王。

页面采用左右结构,使用的940宽度。使用如下代码:

	
...
...

期望得到左右两栏,总宽度为940的布局,但是结果却发现宽度不对。后来修改为:

	
...
...

问题解决了。使用row-fluid,所有的内嵌列都是按比例分配父列的100%宽度。也就是按940为总宽度,12列栅格按比例等分。而使用row时,默认12列的宽度为1170px。