以下是原文翻译成繁體中文的版本，使用Markdown格式：

Bootstrap - Reboot

# Bootstrap - Reboot：初學者的友好指南

你好，未來的網頁開發者！我很興奮能成為你進入Bootstrap Reboot世界的導遊。作為一個教了多年計算機科學的人，我迫不及待想與你分享我的知識和經驗。所以，來一杯咖啡（或者茶，如果你喜歡的話），我們開始吧！

## Bootstrap Reboot是什麼？

在我們開始之前，讓我給你講一個小故事。想像你搬進一個新房子。在你開始裝修之前，你會想要一個乾淨的畫布，對吧？Bootstrap Reboot對於網頁開發就是這樣。它就像給你的網頁刷上了一層新漆，為你建立一個一致的基礎來進行建造。

Bootstrap Reboot是一組CSS樣式，它們能夠在不同瀏覽器中標準化默認的HTML元素。它就像一種瀏覽器的通用語言，確保你的網站在任何地方查看時都保持一致。

## 方法

Bootstrap Reboot的方法簡單而強大。它旨在：

1. 為網頁開發提供一個乾淨的畫布
2. 確保跨瀏覽器的一致性
3. 提高可用性和可訪問性

現在，讓我們深入具體內容！

## 頁面默認設定

Bootstrap Reboot為整個頁面設置了一些默認樣式。以下是一個簡單的例子：

```html
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的超棒網站</title>
  </head>
  <body>
    <h1>歡迎來到我的網站！</h1>
  </body>
</html>

在這個例子中，Bootstrap Reboot確保：

所有元素的box-sizing被設置為border-box
font-family被設置為本地字體堆疊（稍後再详细介绍！）
line-height被設置為1.5以改善可讀性
body的background-color被設置為白色

本地字體堆疊

記得上次我們為網站指定 exact 字體嗎？Bootstrap Reboot引入了本地字體堆疊。這就像擁有一個衣櫥，無論你穿上什麼衣服，總是看起來很好！

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

這個字體堆疊確保你的文字在任何設備上看起来都很棒，使用系統的默認字體。

標題

標題就像書中的章節標題。它們幫助組織你的內容，使其更容易閱讀。Bootstrap Reboot為所有標題等級（h1到h6）提供了一致的樣式。

<h1>這是一個主標題</h1>
<h2>這是一個副標題</h2>
<h3>這是一個次副標題</h3>

段落

段落是內容的面包和黃油。Bootstrap Reboot確保它們容易閱讀且間隔適當。

<p>這是一個段落。它之所以容易閱讀，是因為Bootstrap Reboot的默認樣式。</p>
<p>這是另一個段落。注意到段落之間的間隔很漂亮嗎？</p>

链接

链接是互聯網的高速公路，連接你的網站的不同部分和導向其他網站。Bootstrap Reboot確保它們容易辨識。

<a href="https://example.com">這是一個链接</a>

默認情況下，链接是藍色並且有下劃線。當你將鼠标悬停在上面時，下劃線會消失。

水平線

水平線就像筆記本中的分隔符。它們幫助分隔內容的不同部分。

<hr>

Bootstrap Reboot確保水平線可見但又不會過於突兀。

列表

列表以結構化的方式組織信息。Bootstrap Reboot為有序列表和无序列表提供了樣式。

<ul>
  <li>這是一個無序列表項</li>
  <li>這是另一個</li>
</ul>

<ol>
  <li>這是一個有序列表項</li>
  <li>這是第二項</li>
</ol>

行内代码

有時候，你需要在你的文本中突出顯示一段代码。Bootstrap Reboot使這件事變得簡單且視覺上吸引人。

<p>使用 <code>console.log()</code> 函數來在控制台打印。</p>

代码块

對於更大的代碼片段，你可以使用代碼塊。Bootstrap Reboot確保它們容易閱讀並且與其他內容視覺上有區別。

<pre><code>
function greet(name) {
  console.log(`Hello, ${name}!`);
}
</code></pre>

变量

在編程中，變量就像持有数据的容器。Bootstrap Reboot為在文本中顯示變量提供了樣式。

<p>變量 <var>x</var> 表示x坐標。</p>

用户输入

當你需要顯示用戶應該輸入的內容時，Bootstrap Reboot為你提供了樣式。

<p>要保存你的工作，請按 <kbd>Ctrl + S</kbd>。</p>

示例輸出

有時候，你需要顯示程序的輸出可能看起來像什麼。Bootstrap Reboot也為此提供了樣式。

<samp>這是輸出可能看起來的樣子。</samp>

表格

表格是展示結構化數據的好方法。Bootstrap Reboot確保它們乾淨且容易閱讀。

<table>
  <thead>
    <tr>
      <th>名稱</th>
      <th>年齡</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

表单

表單是用户與網站互動的方式。Bootstrap Reboot為表單元素提供了一致的樣式。

<form>
  <label for="name">名稱：</label>
  <input type="text" id="name" name="name">

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">

  <button type="submit">提交</button>
</form>

按钮指针

按鈕是交互式元素，Bootstrap Reboot確保它們看起來像樣。

<button>點我！</button>

當你將鼠标悬停在按鈕上時，光標會變成指针，表示它是可點擊的。

雜項元素

Bootstrap Reboot還為各種其他HTML元素提供了樣式。這裡有一個快速的例子：

<abbr title="超文本標記語言">HTML</abbr> 是網頁的標準標記語言。

引用

引用語句是用於突出重要引語或文本片段的好方法。

<blockquote>
  <p>生存還是毀亡，這是一個問題。</p>
  <footer>— 威廉·莎士比亞</footer>
</blockquote>

行内元素

Bootstrap Reboot確保行内元素具有一致的樣式。

<p>這段文字是 <strong>加粗</strong>，這段是 <em>斜體</em>，這段是 <u>下劃線</u>。</p>

摘要

<summary>元素與<details>一起使用，創建可展开/可折疊的部分。

<details>
  <summary>點擊展開</summary>
  <p>這是展開的內容。</p>
</details>

HTML5 [hidden] 屬性

Bootstrap Reboot尊重HTML5的hidden屬性，可用於隱藏元素。

<div hidden>這段內容被隱藏了。</div>

就是这样，夥伴們！我們已經涵蓋了Bootstrap Reboot的主要方面。記住，熟能生巧，所以不要害怕在你的项目中嘗試這些元素。快樂編程！

Credits: Image by storyset