bootstrap是一個不錯的前端框架。這里寫一下使用中遇到過的幾點問題。

1.bootstrap的模態(tài)框modal的問題。  有時候會出現(xiàn)彈出模態(tài)框的時候遮罩把模態(tài)框遮住的情況。

出現(xiàn)這個問題的原因，多半是模態(tài)框的html代碼放置位置不對。看官方文檔。說明如下：

模態(tài)框的 HTML 代碼放置的位置

務必將模態(tài)框的 HTML 代碼放在文檔的最高層級內(nèi)（也就是說，盡量作為 body 標簽的直接子元素），以避免其他組件影響模態(tài)框的展現(xiàn)和/或功能。

如果因為某種原因我們沒辦法把模態(tài)框的HTML代碼放到最高層級內(nèi)，那么我們可以把它移動過去。

jQuery代碼：需要的話請自行翻譯成JavaSccipt代碼。

$(".modal").appendTo("body"); 

這個問題告訴我們 文檔很重要。

2.在使用bootstrap的同時使用地圖API的時候，可能會出現(xiàn)bootstrap與地圖沖突，地圖顯示不出來的情況。這里的問題主要是在使用bootstrap的變體ZUI的時候遇到的。

由于bootstrap有很多自身的css。所以有時候會跟地圖API產(chǎn)生一些沖突。導致地圖或者地圖里面的一些控件顯示不出來。我之前用天地圖WebAPI與ZUI的時候出現(xiàn)過地圖加載不出來的情況。

解決問題的過程：

1.打開瀏覽器的開發(fā)者工具，看console控制臺有無報錯。無有?？磏etwork中的資源，地圖相關的圖片資源無加載。有。

2.將地圖調(diào)用的代碼從項目中獨立出來，看能否正常顯示。能。

3.在項目中，使用二分法一半一半地刪除引用的js,css看是否這些js或css對天地圖API造成了影響。鎖定問題在zui.css。

4.在elements那里核對地圖那個div下面的一些css。最后發(fā)現(xiàn)這一句。

audio, canvas, img, svg, video { 
  max-width: 100%; 
  vertical-align: middle; 
} 

ok，問題解決，zui與天地圖webAPI的沖突出在 max-width:100%上。 修改成max-width:none; 地圖成功顯示。當然不是直接修改其源代碼，而是在對應div下面把那個屬性給覆蓋掉。

后來做運行軌跡的時候，發(fā)現(xiàn)標注Maker和線line都顯示不出來 的情況。經(jīng)過與正常的對比。并且在控制臺查詢，發(fā)現(xiàn)標注和線是加載了的。只是沒有成功顯示而已。 原來是svg的問題。也是上面那句代碼的影響。修改了就能正常顯示了。

3.ZUI使用數(shù)據(jù)表格初始化不正常的問題。datatable.js。

ZUI中有一個很強大的數(shù)據(jù)表格插件?？梢詫?shù)據(jù)表格第一列進行排序操作。

按照官方文檔的說法，只要這一句就可以初始化表格插件，正常排序。

$('table.datatable').datatable({sortable: true}); 

但是我們的小伙伴在使用的時候，發(fā)現(xiàn)這一句并沒有任何作用，完全沒有達到范例中的排序效果。于是把這個問題交給我解決。

一開始肯定是懷疑小伙伴哪個地方接口沒調(diào)用對，然而，我自己試了一下，也沒有什么用。

于是繼續(xù)看接口，發(fā)現(xiàn)還有另一種初始化的方式，需要把數(shù)據(jù)自己拼成一個數(shù)組傳遞進去。

/* 使用啟動參數(shù)選項來初始化數(shù)據(jù) */ 
$('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']}, 
      // 更多數(shù)據(jù) 
    ] 
  }, 
  // 其他啟動參數(shù)選項 
}); 

我就拼了一個，發(fā)現(xiàn)可以正常初始化，達到了預期效果。   但是如果每次調(diào)用這個東西都要手工拼那么一大個數(shù)組出來，顯然是不劃算的。那么問題出在哪里呢？

于是斷點。進到源碼里去，發(fā)現(xiàn)兩種方式的不同在于一個有data傳入，一個沒有data傳入。而在源碼里對于沒有data的情況下的處理是自己根據(jù)表格的內(nèi)容來生成data。

于是我將它生成的最終data使用console.log(JSON.stingify(data))出來，再用這個生成的data，使用第二種方式傳入data來初始化。發(fā)現(xiàn)不能正常使用功能。

于是將問題鎖定在這個 生成的data上面。

通過對比范例中的data，以及生成的data，發(fā)現(xiàn)居然不一樣。 范例中的data每一行的數(shù)據(jù)是一個數(shù)組包含的里面每一個格子里的內(nèi)容，是直接量。而生成的data每一行的數(shù)據(jù)是一個數(shù)組包含的每一個格子的對象，對象中又包含了一些信息。這是差異所在。另外生成的表頭數(shù)據(jù)也有一些差異。

于是按照范例中的數(shù)據(jù)要求來修改源代碼，

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'), 
    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正常。問題初步解決。

附：ZUI文檔：http://zui.sexy/

bootstrap文檔：http://v3.bootcss.com/javascript/

做前端的難免遇到各種各樣的問題。不要慌，一步步來，掌握了科學系統(tǒng)的發(fā)現(xiàn)問題和解決問題的方法，就能很快的鎖定問題進而解決問題了。

以上就是小編為大家?guī)淼臏\談bootstrap使用中的一些問題以及解決過程全部內(nèi)容了，希望大家多多支持腳本之家~

最新評論