bootstrap charisma 入門學習筆記

標籤：bootstrap   charisma   前端架構   css   html   

Bootstrap，來自 Twitter，是目前最受歡迎的前端架構。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML架構。而Charisma是一套全功能的，免費，會員品質的響應式HTML5管理員介面模板，基於"Bootstrap"，擁有了9套不同的佈景主題色彩內容，可以滿足你的不同需要！

本篇主要說說charisma的簡單應用。首先，官網。我對官網的東西做了一定的精簡。在這裡下載。有些東西不屬於charisma的，為了方便，我將其放在一個目錄下。其次是我精簡的裡面除了皮膚css外，其他所有css和js都需要引用。另外我對皮膚css做了一定修改，具體修改為，在每個css最後加了幾個類，比如設定背景色、邊框等。

註：這架構不相容IE6（官方不打算支援的），在IE8、9下顯示有少量問題，IE-Edge與chrome、ff等可以達到最佳顯示效果。視情況使用。

另外簡單說說響應式編程與非響應式編程的區別。響應式意思就是根據螢幕的寬度來動態調整元素的位置，一般用於相容多種螢幕與手機瀏覽器。非響應式就是各種螢幕看到的效果一樣（小螢幕容易導致文字溢出等問題）。使用響應式編程，使用響應式編程，使用響應式編程，重要的事情說三遍。在寬屏瀏覽器中響應式編程完全不會影響顯示效果，在窄屏瀏覽器中也可以達到最佳顯示效果。並且兩者難度相當。所以，你懂得。

進入正題。首先我給出一個響應式charisma架構代碼，頁面可以直接在架構代碼基礎上開發。

<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link id="bs_css" rel="stylesheet" href="charisma/css/bootstrap-slate.min.css" /><link rel="stylesheet" href="charisma/css/charisma-app.css" /><link rel="stylesheet" href="charisma/css/animate.min.css" /><title>響應式Charisma架構</title><style type="text/css">a { text-decoration: none !important; }@-webkit-viewport { width: device-width; }@-moz-viewport { width: device-width; }@-ms-viewport { width: device-width; }@-o-viewport { width: device-width; }@viewport { width: device-width; }</style></head><body><form></form><!--[if lt IE 9]><script type="text/javascript" src="charisma/js/html5shiv.js"></script><script type="text/javascript" src="charisma/js/respond.min.js"></script><![endif]--><script type="text/javascript" src="charisma/js/jquery.js"></script><script type="text/javascript" src="charisma/js/bootstrap.min.js"></script></body></html>

簡單解釋下。第一行。由於Bootstrap基於HTML5，所以這行不能變。

head標籤內部：除了關鍵的聲明、自訂風格外，還有必要的css檔案。其中id為bs_css的這個為皮膚，目錄下有8個類似名稱的css檔案。直接jquery改href屬性即可實現動態換膚。自訂風格第一個為去掉a標籤的底線，其他的為響應式編程必須用的，估計是設定顯示寬度。

由於IE8不相容HTML5標籤，所以需要在低版本IE中引入這兩個js檔案。最後兩個js檔案必須引用。

架構說完了，說說使用。使用上直接參照官網的例子，Chrome下審查元素，想實現啥就直接複製那一堆代碼，就ok了。

例子看完之後，我說說我對bootstrap皮膚的改動：

class="bg-normal"    這個表示設定背景色（用於層疊元素時非常有用）

class="bg-border"    這個用於設定邊框（當源架構無法實現需求時）

class="text"    這個用來設定前景色彩（除了文字外還可以用來設定其他的）

class="frame"    chass="framechild"    這兩個用來設計自訂表格（比如LIST表格，可以用這個實現）

class="border-xxx"    這個用來設定顯示哪個邊框（有時候只想顯示一個邊框，可以試試這個）

上面幾個css支援全部8種皮膚風格（網上說的9種，不知道最後一種是啥），可以直接使用。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

bootstrap charisma 入門學習筆記