bootstrap使⽤中的⼀些问题以及解决过程
bootstrap是⼀个不错的前端框架。这⾥写⼀下使⽤中遇到过的⼏点问题。
1.bootstrap的模态框modal的问题。  有时候会出现弹出模态框的时候遮罩把模态框遮住的情况。
出现这个问题的原因，多半是模态框的html代码放置位置不对。看官⽅⽂档。说明如下：
模态框的 HTML 代码放置的位置
务必将模态框的 HTML 代码放在⽂档的最⾼层级内（也就是说，尽量作为 body 标签的直接⼦元素），以避免其他组件影响模态框的展现和/或功能。
如果因为某种原因我们没办法把模态框的HTML代码放到最⾼层级内，那么我们可以把它移动过去。
jQuery代码：需要的话请⾃⾏翻译成JavaSccipt代码。
$(".modal").appendTo("body");
这个问题告诉我们 ⽂档很重要。
2.在使⽤bootstrap的同时使⽤地图API的时候，可能会出现bootstrap与地图冲突，地图显⽰不出来的情况。这⾥的问题主要是在使⽤bootstrap的变体ZUI的时候遇到的。
由于bootstrap有很多⾃⾝的css。所以有时候会跟地图API产⽣⼀些冲突。导致地图或者地图⾥⾯的⼀些控件显⽰不出来。我之前⽤天地图WebAPI与ZUI的时候出现过地图加载不出来的情况。
解决问题的过程：
1.打开浏览器的开发者⼯具，看console控制台有⽆报错。⽆有。看network中的资源，地图相关的图⽚资源⽆加载。有。
2.将地图调⽤的代码从项⽬中独⽴出来，看能否正常显⽰。能。
3.在项⽬中，使⽤⼆分法⼀半⼀半地删除引⽤的js,css看是否这些js或css对天地图API造成了影响。锁定问题在zui.css。
4.在elements那⾥核对地图那个div下⾯的⼀些css。最后发现这⼀句。
audio, canvas, img, svg, video {
max-width: 100%;
vertical-align: middle;
}
ok，问题解决，zui与天地图webAPI的冲突出在 max-width:100%上。 修改成max-width:none; 地图成功显⽰。当然不是直接修改其源代码，⽽是在对应div下⾯把那个属性给覆盖掉。
后来做运⾏轨迹的时候，发现标注Maker和线line都显⽰不出来 的情况。经过与正常的对⽐。并且在控制台查询，发现标注和线是加载了的。只是没有成功显⽰⽽已。 原来是svg的问题。也是上⾯那句代码的影响。修改了就能正常显⽰了。
3.ZUI使⽤数据表格初始化不正常的问题。datatable.js。
ZUI中有⼀个很强⼤的数据表格插件。可以对数据表格第⼀列进⾏排序操作。
按照官⽅⽂档的说法，只要这⼀句就可以初始化表格插件，正常排序。
$('table.datatable').datatable({sortable: true});
但是我们的⼩伙伴在使⽤的时候，发现这⼀句并没有任何作⽤，完全没有达到范例中的排序效果。于是把这个问题交给我解决。
⼀开始肯定是怀疑⼩伙伴哪个地⽅接⼝没调⽤对，然⽽，我⾃⼰试了⼀下，也没有什么⽤。
于是继续看接⼝，发现还有另⼀种初始化的⽅式，需要把数据⾃⼰拼成⼀个数组传递进去。
/* 使⽤启动参数选项来初始化数据 */
$('table.datatable').datatable({
data: {
cols: [
{width: 80, text: '#', type: 'number', flex: false, colClass: 'text-center'},
{width: 160, text: '时间', type: 'date', flex: false, sort: 'down'},
{width: 80, text: '名称', type: 'string', flex: true, colClass: ''}
],
rows: [
{checked: false, data: [1, '2016-01-18 11:05:15', '名称⽰例1']},
{checked: false, data: [2, '2016-01-20 12:06:16', '名称⽰例2']},
// 更多数据
]
},
// 其他启动参数选项
});
我就拼了⼀个，发现可以正常初始化，达到了预期效果。  但是如果每次调⽤这个东西都要⼿⼯拼那么⼀⼤个数组出来，显然是不划算的。那么问题出在哪⾥呢？
于是断点。进到源码⾥去，发现两种⽅式的不同在于⼀个有data传⼊，⼀个没有data传⼊。⽽在源码⾥对于没有data的情况下的处理是⾃⼰根据表格的内容来⽣成data。
于是我将它⽣成的最终data使⽤console.log(JSON.stingify(data))出来，再⽤这个⽣成的data，使⽤第
⼆种⽅式传⼊data来初始化。发现不能正常使⽤功能。
于是将问题锁定在这个 ⽣成的data上⾯。
通过对⽐范例中的data，以及⽣成的data，发现居然不⼀样。 范例中的data每⼀⾏的数据是⼀个数组包含的⾥⾯每⼀个格⼦⾥的内容，是直接量。⽽⽣成的data每⼀⾏的数据是⼀个数组包含的每⼀个格⼦的对象，对象中⼜包含了⼀些信息。这是差异所在。另外⽣成的表头数据也有⼀些差异。
于是按照范例中的数据要求来修改源代码，
cols.push($.extend(
{
text: $th.html(),
flex: false || $th.hasClass('flex-col'),
width: 'auto',
cssClass: $th.attr('class'),
css: $th.attr('style'),
type: 'string',
ignore: $th.hasClass('ignore'),
sort: !$th.hasClass('sort-disabled'),
mergeRows: $th.attr('merge-rows')
}, $th.data()));
为
$t.find('thead > tr:first').children('th').each(function()                {
$th = $(this);
cols.push($.extend(
{
text: $th.html(),
flex: false || $th.hasClass('flex-col'),
jquery是什么有什么作用width: 'auto',
cssClass: $th.attr('class'),
colClass: $th.attr('class'),
css: $th.attr('style'),
type: 'string',
ignore: $th.hasClass('ignore'),
sort: !$th.hasClass('sort-disabled')
}, $th.data()));
});
修改：
row.data.push($.extend(
{
cssClass: $td.attr('class'),
css: $td.attr('style'),
text: $td.html(),
colSpan: colSpan
}, $td.data()));
为：
row.data.push($td.html());
测试
$('table.datatable').datatable({sortable: true});
成功初始化。排序可能正常。表格css正常。问题初步解决。
做前端的难免遇到各种各样的问题。不要慌，⼀步步来，掌握了科学系统的发现问题和解决问题的⽅法，就能很快的锁定问题进⽽解决问题了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。