Bootstrap学习

Bootstrap是基于 HTML,CSS 和 JavaScript 的简洁灵活的流行前端框架及交互组件集,由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。Bootstrap有非常完备和详尽的开发文档,Web开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。 官网的文件很详细简单,对于下载来说也有多种方式。对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。 可以来查看三个文件夹中的文件 


这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。

字体图标文件来自于Glyphicons。 

这里主要演示用bootstrap框架的旋转木马组件制作流水式图片效果: 

头部引入bootstrap css样式表:

body代码:


最后效果:



Bootstrap Datetimepicker 兼容IE8

bootstrap datetimepicker插件在IE8下显示无效,报错提示bootstrap-datetimepicker.js脚本不支持indexOf()方法

解决方案:在bootstrap-datetimepicker.js/bootstrap-datetimepicker.min.js最前面添加以下代码:

if (!Array.prototype.indexOf)  
{  
    Array.prototype.indexOf = function(elt /*, from*/)  
    {  
        var len = this.length >>> 0;

        var from = Number(arguments[1]) || 0;  
        from = (from < 0) ? Math.ceil(from) : Math.floor(from);  
        if (from < 0)  
            from += len;
        for (; from < len; from++)  
        {  
            if (from in this &&  
            this[from] === elt)  
            return from;  
        }  
        return -1;  
    };  
}



Bootstrap datetimepicker and bootstrap validator

最近在项目中使用bootstrap3.3.4作为前端框架,bootstrap validator作为表单验证插件,bootstrap-datetimepicker作为时间选择插件。

但当用bootstrap-datetimepicker选择完时间后bootstrap validator并没有反应,只有在点击时间选择输入框并进行插入/删除操作时bootstrap validator才出现响应。贴出代码如下:

html code:

[html] 




 



[/html]

js code:

[js] 
$(document).ready(function () { 
$(‘#form’).bootstrapValidator({ 
feedbackIcons: { 
valid: ‘glyphicon glyphicon-ok’, 
invalid: ‘glyphicon glyphicon-remove’, 
validating: ‘glyphicon glyphicon-refresh’ 
}, 
fields: { 
datatime: { 
validators: { 
date: { 
format: ‘DD/MM/YYYY’, 
message: ‘The format is dd/mm/yyyy’ 
}, 
notEmpty: { 
message: ‘The field can not be empty’ 




}); 
}); 
$(‘#datetime’).datetimepicker({ 
format: ‘yyyy-mm-dd hh:ii’, 
language: ‘zh-CN’, 
autoclose: true, 
});

[/js]

问题及解决方法:

在使用bootstrap validator和其他插件(bootstrap datetimepicker)的同时,当插件执行完毕后需要调用bootstrap validator重新验证。

方案:

[js] 
$(‘#datetime’) 
.on(‘changeDate show’, function(e) { 
// Revalidate the date when user change it 
$(‘#form’).bootstrapValidator(‘revalidateField’, ‘datetime’); 
}); 
[/js]

bootstrap validator文档:datetimepicker example


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值