這篇文章適合誰
這篇文章適合具備HTML與CSS有興趣也有一點基礎的讀者，以下除了介紹何謂Bootstrap外，也把Bootstrap的一些基本語法整理成範例以供慘考，讓讀者可以藉由本篇文章學習到基本的Bootstrap。
什麼是Bootstrap?
Bootstrap 是一個用於快速開發Web 應用程序和網站的前端框架，提供了包含HTML、CSS及JS等內容的框架。
Bootstrap包含的內容
- 基本結構 ：Bootstrap提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
- CSS ：Bootstrap自帶以下特性：全局的CSS設置、定義基本的HTML元素樣式、可擴展的class，以及一個先進的網格系統。
- 組件 ：Bootstrap包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。
- JavaScript插件 ：Bootstrap包含了十幾個自定義的jQuery插件。您可以直接包含所有的插件，也可以逐個包含這些插件。
- 定制 ：您可以定制Bootstrap的組件、LESS變量和jQuery插件來得到自己的版本。
Bootstrap排版
標題：Bootstrap 中定義了所有的HTML 標題（h1 到h3）的樣式。
結果
內聯子標題：如果需要向任何標題添加一個內聯子標題
只需要簡單地在元素兩旁添加<small>，或者添加.small class，這樣子您就能得到一個字號更小的顏色更淺的文本。
結果
引導主體副本：為了給段落添加強調文本，則可以添加class=”lead”，這將得到更大更粗、行高更高的文本。
結果
排版類語法整理
- .lead：使段落突出顯示
- .small：設定小文本(設置為父文本的85% 大小)
- .text-left：設定文本左對齊
- .text-center：設定文本居中對齊
- .text-right：設定文本右對齊
- .text-justify：設定文本對齊,段落中超出屏幕部分文字自動換行
- .text-nowrap：段落中超出屏幕部分不換行
- .text-lowercase：設定文本小寫
- .text-uppercase：設定文本大寫
- .text-capitalize：設定單詞首字母大寫
- .initialism：顯示在<abbr> 元素中的文本以小號字體展示
- .blockquote-reverse：設定引用右對齊
- .list-unstyled：移除默認的列表樣式，列表項中左對齊( <ul> 和<ol> 中)。 這個類僅適用於直接子列表項(如果需要移除嵌套的列表項，你需要在嵌套的列表中使用該樣式)
- .list-inline：將所有列表項放置同一行
- .dl-horizontal：該類設置了浮動和偏移，應用於<dl> 元素和<dt> 元素中，具體實現可以查看實例
- .pre-scrollable：使<pre> 元素可滾動scrollable
Bootstrap 表格
以下是Bootstrap 支持的一些表格元素
- <table>：為表格添加基礎樣式。
- <thead>：表格標題行的容器元素（<tr>），用來標識表格列。
- <tbody>：表格主體中的表格行的容器元素（<tr>）。
- <tr>：一組出現在單行上的表格單元格的容器元素（<td> 或<th>）。
- <td>：默認的表格單元格。
- <th>：特殊的表格單元格，用來標識列或行（取決於範圍和位置）。必須在<thead> 內使用。
- <caption>：關於表格存儲內容的描述或總結。
<tr>, <th> 和<td> 類（下表語法可用於表格的行或者單元格）
- .active：將懸停的顏色應用在行或者單元格上
- .success：表示成功的操作
- .info：表示信息變化的操作
- .warning：表示一個警告的操作
- .danger：表示一個危險的操作
基本的表格範例
結果
Bootstrap圖片
以下語法可用於圖片中
- .img-rounded：為圖片添加圓角(IE8 不支持)
- .img-circle：將圖片變為圓形(IE8 不支持)
- .img-thumbnail：縮略圖功能
- .img-responsive：圖片響應式(將擴展到父元素)
以下是有關於button的相關語法
- .btn：為按鈕添加基本樣式
- .btn-default：默認/標準按鈕
- .btn-primary：原始按鈕樣式（未被操作）
- .btn-success：表示成功的動作
- .btn-info：該樣式可用於要彈出信息的按鈕
- .btn-warning：表示需要謹慎操作的按鈕
- .btn-danger：表示一個危險動作的按鈕操作
- .btn-link：讓按鈕看起來像個鏈接(仍然保留按鈕行為)
- .btn-lg：製作一個大按鈕
- .btn-sm：製作一個小按鈕
- .btn-xs：製作一個超小按鈕
- .btn-block：塊級按鈕(拉伸至父元素100%的寬度)
- .active：按鈕被點擊
- .disabled：禁用按鈕
結語
以上是Bootstrap一些基本的語法整理，希望能夠藉由這篇文章幫助到你，當然還有很多的用法沒有收納進來，如果希望可以看到更多內容，歡迎來到我們快樂學程式的官網來逛逛。網址連結：https://www.happycoding.today/posts
