0.2 用Bootstrap 4創建第一個網頁

Step 1. 添加HTML5 doctype
Bootstrap 4使用HTML元素以及CSS屬性—需要HTML5 doctype
總是在頁面最前方引入HTML5 doctype,以及語言(lang)屬性和正確的字符集(charset)

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
  </head>
</html>

Step 2. Bootstrap 4是行動端優先的
Bootstrap 4被設計來響應行動裝置
行動端優先的樣式是框架核心的一部分

為了確保正確的渲染和觸控縮放,請在元素內添加以下標籤

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 

width=device-width:根據裝置的螢幕寬度設定頁面的寬度
initial-scale=1:當頁面第一次被瀏覽器載入時設定初始放大倍率

Step 3. 容器
Bootstrap 4還需要包含元素來包裝網頁內容

有兩個容器可以選擇:
.container類別提供一個響應式固定寬度的容器
.container-fluid類別提供一個全寬容器,寬度為螢幕寬度

兩個基本Bootstrap 4頁面

 

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.3.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.12.9%2Fumd%2Fpopper.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F4.0.0%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>


<div class="container">
  
<h1>我的第一個Bootstrap 4頁面</h1>

  

這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字

</div>


</body>
</html>

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.3.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.12.9%2Fumd%2Fpopper.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F4.0.0%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>


<div class="container-fluid">
  
<h1>我的第一個Bootstrap 4頁面</h1>

  

這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字這是一些文字

</div>


</body>
</html>

有疑問? 留個言吧!

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料