❶ 產品經理技術腦：Bootstrap
什麼是 Bootstrap？
Bootstrap 是Web 應用程序的前端框架擾滾凱。基於 HTML、CSS、javaSCRIPT 。
Bootstrap由美國Twitter公司的設計師Mark Otto和Jacob Thornton合作開發的，基於HTML、CSS、JavaScript 的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷備禪。
Bootstrap提供了優雅的HTML和CSS規范，由動態CSS語言Less寫成，一直是GitHub上的熱門開源項目。
Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。在現在的 Web 開發中，有幾個幾乎所有的 Web 項目中都需要的組件。
Bootstrap版本功能發展
Bootstrap 與最新版的 Google Chrome、Firefox、Internet Explorer、Opera 和 Safari 瀏覽器兼容，盡管有些瀏覽器並不是支持所有操作系統。
從 2.0 版本開始，Bootstrap 支持響應式網頁設計(RWD)。頁面布局可以根據顯示網頁的設備（桌面、平板電腦、手機）來進行動態調整。
3.0 版本開始，Bootstrap 將移動設備優先作為設計方針，更加強調了響應式設計。
4.0 alpha 版本添加 Sass 和 Flexbox 的支持。
Bootstrap特點
Bootstrap非常流行，得益於它非常實用的功能和特點。主要核心功能特點如下：
l跨設備、跨瀏覽器
可以兼容所有現代瀏覽器，包括比較詬病的IE7、8。當然，本課程不再考慮IE9以下瀏覽器。
l響應式布局
不但可以支持PC端的各種解析度的顯示，還支持移動端PAD、手機等屏幕的響應式切緩喚換顯示。
l提供的全面的組件
Bootstrap提供了實用性很強的組件，包括：導航、標簽、工具條、按鈕等一系列組件，方便開發者調用。
l內置jQuery插件
Bootstrap提供了很多實用性的jquery插件，這些插件方便開發者實現Web中各種常規特效。
l支持HTML5、CSS3
HTML5語義化標簽和CSS3屬性，都得到很好的支持。
l支持LESS動態樣式
LESS使用變數、嵌套、操作混合編碼，編寫更快、更靈活的CSS。它和Bootstrap能很好的配合開發。
Bootstrap基本內容與組件
Bootstrap 包括 HTML、CSS 及 JavaScript 的框架，提供字體排印、窗體、按鈕、導航及其他各種組件及 Javascript 擴展。主要包含內容有：
l 基本結構 ： Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
l 全局CSS樣式 ： Bootstrap 自帶以下特性：全局的 CSS設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。
l 組件 ： Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。
l JavaScript 插件 ：Bootstrap包含了十幾個自定義的jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。
l 定製 ：您可以定製Bootstrap的組件、LESS 變數和jQuery 插件來得到您自己的版本。
lBootstrap全局Css樣式包括
Grid
Typography
Tables
Forms
Buttons
Responsiveness。
l還有大量其他有用的前端組件，比如：
Dropdowns
Navigation
Modals
Typehead
Pagination
Carousal
Breadcrumb
Tab
Thumbnails
Headers
Bootstrap資源
l參考資料
Bootstrap官網
http://getbootstrap.com
Bootstrap中文網
http://www.bootcss.com
網站使用案例
http://expo.bootcss.com/
Github
https://github.com/twbs/bootstrap
l教程
Bootstrap菜鳥教程
http://www.runoob.com/bootstrap/bootstrap-tutorial.html
Bootstrap on W3Schools
http://www.w3schools.com/bootstrap
慕課網視頻教程
http://www.imooc.com/course/list?c=bootstrap
l模版
Bootstrap免費模版
http://startbootstrap.com
模糊效果後台模版
http://akveo.github.io/blur-admin/
後台模版
https://colorlib.com/polygon/gentelella/index.html
儀表盤
http://keen.github.io/dashboards/
l主題
Flat－ui
http://designmodo.com/flat-free/
各種配色主題
https://bootswatch.com/
基於bootstrap的主題框架
http://bootflat.github.io
l實用工具
實用代碼片段
http://bootsnipp.com/ 提供一些有用的在線工具和代碼片段
❷ 在線求解答:bootstrap typeahead插件結合ajax 使用的實例,要求親測可用不報錯.
使用bootstrap2中bootstrap.js自帶了typeahead的模塊，可以直接使用,但是bootstrap3的bootstrap.js沒有集成typeahead自動提示模塊,因此需要下載bootstrap3-typeahead.js,另外如果沒有下載bootstrap前端框架還需要下載bootstrap3.zip。
1、前台代碼如下，將jquery.js,bootstrap.css,bootstrap.js等包含其中:
<link href="themes/normal/css/bootstrap.css" rel="stylesheet">
<script src="http。//cdn。bootcss。com/jquery/1.10.2/jquery.min.js"></script>
<script src="themes/normal/js/bootstrap.min.js"></script>
<script src="themes/normal/js/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#receiptno').typeahead({
source: function (query, process) {
$.ajax({
url: '/mirage/index.php?it=barservice&op=get-receiptno',
type: 'POST',
dataType: 'JSON',
data: query,
success: function(data) {
console.log(data);
process(data);
}
});
}
});
});
</script>
❸ 如何修改bootstrap模板，要實實在在的步驟，
用amaze ui
也是基於bootstrap的UI。比bootstrap功能多，樣式好看，一整套中文教程還有模板案例。
至於你一定要說修改bootstrap模板
1：下載模板
2：用谷歌瀏覽器打開index.html（一般都有這個頁面）
3：用谷歌瀏覽器調試（F12），選中要修改的元素。在調試框右邊修改樣式。修改好了。就將這個樣式單獨寫一個class賦值上去