Bootstrap 多方互動網站 免費的 HTML、CSS 及 JavaScript 架構！Bootstrap 是開發行動優先的多方互動網站時，常見且免費的 HTML、CSS 及 JavaScript 架構。架構中包含按鈕、表格、導覽、影像轉盤，以及其他可用於網頁之元素的多方互動 CSS 和 HTML 範本。還有一些選擇性 JavaScript 外掛程式可供使用，讓即使只有基本編碼知識的開發人員也能開發絕佳的多方互動網站。
jQuery！！jQuery 是一套物件導向式簡潔輕量級的 JavaScript Library。透過 jQuery 你可以用最精簡少量的程式碼來輕鬆達到跨瀏覽器 DOM 操作、事件處理、設計頁面元素動態效果、AJAX 互動等。
Bootstrap 主站及下載：https://getbootstrap.com/
jQuery 主站及下載：http://jquery.com/
jQuery 教學站：https://www.fooish.com/jquery/
本小站下載： 含 Bootstrap 3.3.7 ~ 4.3.1 & jQuery 1.11.3 ~ 3.4.1
另外 Bootstrap 已出到v4.0 bate，不才笨兔也試著做一個dome來嚐鮮，畫面是真的比較亮眼唄！ 按此觀看笨兔做的 Bootstrap 4.0 DEMO 頁
下載後、將 bootstrap 的 css 和 js ，jQuery 的 js 引入您的網頁。如以下程式碼的紅色字部份，主要是您 src = 的檔案路徑要正確哦！^^
若您不想下載，可直接到 bootstrap 或 jQuery 網站直接引入該檔的網址也是一樣的功能。如以下程式碼的藍色字部份
。優點是快、簡便。缺點是若你懂的CSS要自行修改，則無檔案可改，再則是若您架在有限制網路的公司區網內，則無法連結來引入使用。
同檔案的紅、藍色部份擇一使用即可。而檔案中的 bootstrap.css 和 bootstrap.min.css 都一樣的，其它的檔案也都一樣。min是 迷你版， 容量較小，但功能都一樣的！^^
<html>
<head> <meta charset="utf-8">
<link rel="shortcut icon" href="gif/vvv.ico">
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - Bootstrap & jquery 簡介說說^^</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="js/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <script src="js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</body>
</html>
笨兔只懂些皮毛，稍加以表格和按鈕來舉例說明一下，網上一大堆教學站，有心者就自行努力囉！^^
一般按鈕
一般表格 按此看範例
套用 bootstrap 的按鈕
套用 bootstrap 的表格
詳看下列程式碼的紅色字部份
<body>
<button type="button" class="btn btn-success">按鈕</button>
<table class="table table-striped table-bordered">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
再來獻醜舉例說一下 jQuery：詳看下列程式碼的紅色字部份(只要看見 Script 語法內有 '$' 符號，就一定是用 jQuery 寫的^^)
<!doctype html>
<html> <haed> <link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $('#btn1').click(function(){ /*按了id=btn1的按鍵*/
$('#test1').text('您按了A按鍵'); /*id=test1的span區塊顯示文字*/
});
$('#btn2').click(function(){ /*按了id=btn2的按鍵*/
$('.testx').text('您按了B按鍵'); /*class類別為testx的區塊全顯示文字*/ });
$('#btn3').click(function(){ /*按了id=btn3的按鍵*/ $('.testx').text(''); /*class類別為testx的區塊全清空*/
}); </script> </head> <body> <p align="center">
<input type="button" id="btn1" value="按我(A按鈕)" class="btn btn-info">
<input type="button" id="btn2" value="按我(B按鈕)" class="btn btn-warning">
<input type="button" id="btn3" value="清除" class="btn btn-danger"><br>
<span class="testx" id="test1"></span>
<span class="testx" id="test2"></span>
<span class="testx" id="test3"></span>
</p> </body> </html>