Bootstrap
- 其實啊，關於前端，我做的頁面永遠都是最醜的那個。現在學習爲時不晚。沒有藝術的我，做不出超級唯美的網頁，但至少簡介大方還是能夠實現的。
Bootstrap簡介
- Bootstrap，來自Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
爲什麼使用Bootstrap
- 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
- 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
- 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
- 響應式設計：Bootstrap 的響應式 CSS 能夠自適應於臺式機、平板電腦和手機。
- 它爲開發人員創建接口提供了一個簡潔統一的解決方案。
- 它包含了功能強大的內置組件，易於定製。
- 它還提供了基於 Web 的定製。
- 它是開源的
Bootstrap 包的內容
- 基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
- CSS：Bootstrap 自帶以下特性，全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。
- 組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。
- JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。
- 定製：您可以定製 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
下載 Bootstrap
文件結構
- 預編譯
![在這裏插入圖片描述]()
- 源碼
![在這裏插入圖片描述]()
HTML 模板
*一個使用了 Bootstrap 的基本的 HTML 模板如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支持 HTML5元素和媒體查詢 -->
<!-- 注意： 如果通過 file:// 引入 Respond.js 文件，則該文件無法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
- 條紋表格佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 條紋表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<caption>條紋表格佈局</caption>
<thead>
<tr>
<th>名稱</th>
<th>城市</th>
<th>郵編</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</body>
</html>
小結
- 內容很簡單，後面深入的部分自己要用，實踐中學
- Vue內容多還沒有學完，這個先用着
- 界面簡潔大方，樣式確實比我寫的好看
- 這篇文章是我第一次用Markdown寫筆記，既學習了Bootstrap，又學了Markdown文本編輯器。
- PS:真的很好用啊！
- 有道雲筆記導入csdn部分轉碼會有問題，要注意規範書寫
- 有緣關注一下
![在這裏插入圖片描述]()
