Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。而Charisma是一套全功能的，免費，會員質量的響應式HTML5管理員界面模板，基於"Bootstrap"，擁有了9套不同的主題顏色內容，可以滿足你的不同需要！Bootstrap主題風格可在http://bootswatch.com/免費下載，同時它也是charisma主題來源。上面有部分主題charisma未收錄
注：charisma在開發中最大的作用還是起到參考作用，裏面有很多bootstrap與jquery例子，所以我這裏並沒引入js/charisma.js，有需要者自行添加引用代碼
本篇主要說說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種，不知道最後一種是啥），可以直接使用。
另外 charisma的input輸入框與select選擇框不太給力。設置黑色風格後還是白色背景。這時可以這樣：
<input type="text" class="text bg-normal bg-border form-control" />【前三個類爲我加的自定義】。然後，顏色風格就與整體統一了。整體風格爲slate的效果圖：
下面列出幾個常見佈局的案例：
首先是最常用的彈出式窗口，配合 jquery.simplemodal.js 使用，當然也可以像官網上面的那種佈局。示例代碼如下：
<div id="test_dlg" class="box bg-normal" style="display: none; position: relative; width: 500px;">
<div class="box-inner">
<div class="box-header well">
<h2><i class="glyphicon glyphicon-info-sign"></i><span> 測試彈出框</span></h2>
<div class="box-icon">
<a href="javascript:void(0)" class="btn btn-round btn-default" onclick="$.modal.close();" title="關閉">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
</div>
<div class="box-content" style="height: 200px;">
</div>
</div>
</div>調用代碼： $('#test_dlg').modal();
效果如下：
內部顯示些啥可自定義編輯，根據源碼差不多就能看出來這個是如何實現的。
除了使用simplemodal外，bootstrap還提供一種彈窗模式，用於類似alert或confirm的消息彈窗，不過經過測試與simplemodal不兼容。效果如下：
具體實現如下：
<div id="test_dlg2" class="modal fade" aria-hidden="true">
<div class="modal-dialog" style="width: 300px;">
<div class="modal-content">
<div class="modal-header">
<h4>時間選擇</h4>
</div>
<div class="modal-body">
<span>aaaaaaaaaaaaaaa</span><br />
<span>aaaaaaaaaaaaaaa</span><br />
<span>aaaaaaaaaaaaaaa</span><br />
<span>aaaaaaaaaaaaaaa</span><br />
<span>aaaaaaaaaaaaaaa</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="$('#test_dlg2').modal('hide')">確定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>然後，需要一個按鈕裏面加入data-toggle與data-target，示例：
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#test_dlg2">彈出對話框</button>即可實現彈出對話框。在對話框中的按鈕加上data-dismiss="modal"表示關閉對話框，如果需要處理後再決定是否關閉對話框，那麼需要如下調用方式：
$('#test_dlg2').modal('hide');這個與simplemodal的modal函數重複，導致bootstrap或simplemodal的modal函數總有一個用不上。看需要再決定如何使用
然後，說一個右下角消息提示的實現。
第一步：引入頭文件、js文件
<link rel="stylesheet" href="charisma/css/noty_theme_default.css" />
<script type="text/javascript" src="charisma/js/jquery.noty.js"></script>第二步：body內加入一行代碼，用於確定顯示方位
<ul class="noty noty_cont noty_layout_bottomRight"></ul>第三步：由於這個定位有點問題，不知道是不是我的錯……於是加入定位代碼：
/*noty提示相關*/
.noty { position: fixed; right: 10px; bottom: 10px; width: 400px; list-style: none; overflow: hidden; }
.noty > li, .noty .noty_close { margin-top: 5px; }第四步：這個提示的調用相對來說還是比較麻煩，這兒封裝一個
var _notyContent = {
'text': '',
'type': '',
'timeout': 10000,
'layout': 'bottomRight',
'animateOpen': { "opacity": "show" },
'closeButton': 'true'
};
//顯示提示消息
//通常只需要前面2個參數就足夠
//type參數：success information warning error
function notyAlert(title, desc, type, timeout, icon) {
title = title || '';
desc = desc || '';
type = type || 'warning';
var text = '<strong><i class="glyphicon ';
if (icon != undefined) {
text += icon;
} else if (type == 'success') {
text += 'glyphicon-ok-sign';
} else if (type == 'information') {
text += 'glyphicon-info-sign';
} else if (type == 'warning') {
text += 'glyphicon-exclamation-sign';
} else if (type == 'error') {
text += 'glyphicon-remove-sign';
}
//獲取提示HTML
_notyContent.text = text + '"></i> ' + title + '</strong><br /><p>' + desc + '</p>';
//獲取提示類型
_notyContent.type = type;
//獲取響應時間
_notyContent.timeout = timeout || 10000;
noty(_notyContent);
}第五步：調用之
notyAlert('成功', '這是一條提示成功信息', 'success');
notyAlert('提示', '這是一條消息提示信息', 'information');
notyAlert('警告', '這是一條警告信息', 'warning');
notyAlert('失敗', '這是一條提示失敗信息', 'error');下面分別是效果圖：
效果挺高大上的。關於消息顯示時間延遲，可修改我封裝的那個js代碼。noty框架給出的接口是傳入html代碼，意味着在消息提示框中插入圖片也未嘗不可。實際上那個關閉的符號就是圖片的實現。