Bootstrap使用心得

2021-08-05 20:41:46 字數 1734 閱讀 7418

最近忙於工作好久沒寫部落格了,今天更新一波,順便記錄一下工作中遇到的疑惑。

關於bootatrap, 其實我並沒有系統的學習過,也就是說我只是在原生 html+css 的基礎之上,用了一些bootstrap 的樣式類及外掛程式,例如 多選下拉列表、時間控制項 等。但是因此我也遇到了一些問題,比如說瀏覽器相容性問題、比如說裝置自適應問題。

(1)瀏覽器相容性問題:由於bootstrap 本身就用到了一些較新的技術,因此對於瀏覽器的版本有要求,一般在 ie9 以上,ie8也可以支援但是需要單獨處理,另外它在google 瀏覽器中顯示良好,但是在火狐瀏覽器和ie瀏覽器中,會有輕微形變,比如說select控制項的樣式,因此後期需要調整的地方很多,當然經驗老道的員工一開始就會有針對不同瀏覽器的樣式內容;

(2)由於bootstrap 裝置優先,它本身的樣式也決定了  bootstrap 更適合應用於簡潔明瞭,優雅大方的**設計,這樣在適應裝置的時候才能靈活布局,因此功能複雜的介面我是不推薦用bootstrap的,而且對ui 也有一定的要求。否則後期進行裝置測試的時候會很頭疼,就像我現在這樣/doge

(3)我在寫這個管理系統的前端的時候,左邊欄和tab欄套用了 h+ 系統的原始碼,後期做了一丟丟調整。這個方法裡面最坑爹的是用到了  iframe  並且我還在 iframe 裡面用了彈出框。結果由於iframe產生了子頁面 ,彈出框的遮罩層變得很麻煩,如果再牽扯到 resize 布局變動,簡直就是乙個大坑。所以重要的事情說三遍: 除非需要引入跨域的網頁資源,盡量少的使用iframe!盡量少的使用iframe!盡量少的使用iframe!

(5)自問自答:

a、在網頁布局的時候,雖然自己也能七零八碎的實現介面需求,可還是感覺沒有使用table 來的方便,**也更統一完整。但是table布局其實是不提倡的,說到底還是css 的功底不到家。不論如何,熟能生巧,先學會熟練實現頁面效果,後期再自己嘗試建立系統性的編碼風格。

···table布局是一種老式的布局方式,在css標準還未統一的時候,table因為氣機構的穩定可靠和較好的相容性成為主流的布局方式,所以早些年很流行table方式布局,但是隨著時間技術的發展和進步,特別是新web標準的確立,table布局方式不在適合我們現在是前端開發,它有很大的侷限性。首先是**的臃腫,可讀性不高,維護性較差,table布局採用宮格式規劃,將整個頁面劃分成若干行和列,靠這些行和列定位區塊,頁面元素越多區域劃分就要越細緻,開啟頁面**,滿螢幕tr td,很難定位到要找到**,編碼修改起來也不直觀。

採用table布局相對於css**布局,css布局頁面**簡潔沒有多餘結構,**要比table**布局少很多,而且看起來一目了然。

除開**簡潔性以外,table布局還存在效能問題,table原本是設計來展示資料的,一行或者一列的資料過長,同一行或者同一列的單元格就會全部要拉伸,以便清晰的顯示資料對應關係,基於這種特性,瀏覽器對table進行渲染的時候需要等待所有格仔的內容的完全載入,解析相比使用css布局的頁面耗時要長(css布局使用的元素相互之間沒有嚴格的關聯關係,載入乙個顯示乙個。載入相應時間快),特別是採用多層table結構巢狀布局的時候,頁面顯示會更慢。

最後乙個使用table布局的缺陷是頁面元素的靈活性不高。所謂成也蕭何,敗也蕭何。結構穩定的table宮格式布局的頁面要改變元素的位置成本很大,需要編輯html結構,修改宮格劃分,如果風格修改過大,相當於重做頁面,而是用css布局的頁面,其他什麼都不要動,僅編輯css即可。

···b、做**,最好一開始就有整體思想,相似的介面能有統一的實現方法;盡量考慮到不同的裝置和尺寸問題;對於所使用的框架能夠做到熟知其優缺點,學會如何避免和解決問題;

c、前端的路還長著呢......

frameset 使用心得

欲明白本篇 html徹底剖析 之標記分類,請看 標記一覽 也請先明白圍堵標記與空標記的分別,請看 html概念 框架概念 謂框架便是網頁畫面分成幾個框窗,同時取得多個 url。只需要 即可,面所有框架標記需要放在乙個總起的 html 檔,這個檔案只記錄了該框架如何分割 不會顯示任何資料,所以不必放入...

Access使用心得

今天臨時用access做資料庫,長期用sql server開發習慣了,總結一下現在為止用到的比較大的差異,以後有新的再補了 1 返回字串長度 len s lenb s 前者返回字元數,後者返回位元組數,並且access中text型別字元統一為2位元組,與sql2000不同。2 join的使用 acc...

vmware使用心得

成功在winxp環境中安裝了vista business版本,反之,亦然。可以建立工作組網路連線了,虛擬機器也可以訪問網際網路了。安裝說明 在安裝嚮導中,無論使用哪種網路連線形式,都不影響正確安裝。安裝後,可以編輯本地機和虛擬機器之間的網路連線形式。需要注意三個細節問題 1 網絡卡要設定為 電源啟動...