Bootstrap学习

最新推荐文章于 2024-04-23 21:43:06 发布

天意pt

最新推荐文章于 2024-04-23 21:43:06 发布

阅读量300

点赞数

分类专栏： bootstrap

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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