week15 - stayjay/wp109b GitHub Wiki

補充css

參考 https://raw.githubusercontent.com/oxalorg/sakura/master/css/normalize.css

bootstrap

Bootstrap 添加到您的項目中？使用 jsDelivr，一個免費的開源 CDN。使用包管理器還是需要下載源文件？前往下載頁面。

CSS

將樣式表複製粘貼到

所有其他樣式表之前，以加載我們的 CSS。 
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

JS

我們的許多組件都需要使用 JavaScript 才能運行。具體來說，它們需要我們自己的 JavaScript 插件和Popper。廣場下面的一個<script>小號靠近你的網頁的結束，閉幕前右標籤，使他們。

捆

在我們的兩個捆綁包之一中包含每個 Bootstrap JavaScript 插件和依賴項。雙方bootstrap.bundle.js並bootstrap.bundle.min.js包括波普我們的提示和popovers。有關 Bootstrap 中包含的內容的更多信息，請參閱我們的內容部分。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

分離

如果您決定使用單獨的腳本解決方案，則必須首先使用 Popper（如果您使用的是工具提示或彈出框），然後是我們的 JavaScript 插件。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

模塊

如果您使用<script type="module">，請參閱我們使用 Bootstrap 作為模塊部分。

組件

想知道哪些組件明確需要我們的 JavaScript 和 Popper？單擊下面的顯示組件鏈接。如果您對一般頁面結構完全不確定，請繼續閱讀示例頁面模板。

顯示需要 JavaScript 的組件

入門模板 請務必使用最新的設計和開發標准設置您的頁面。這意味著使用 HTML5 文檔類型並包含一個視口元標記以實現正確的響應行為。把它們放在一起，你的頁面應該是這樣的：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>

連結bootstrap

HTML Iframes

HTML iframe 用於在網頁中顯示網頁。

HTML iframe 語法

HTML<iframe>標籤指定了一個內嵌框架。

內嵌框架用於在當前 HTML 文檔中嵌入另一個文檔。

句法

<iframe src="url" title="description"></iframe>

提示：始終 title為<iframe>. 屏幕閱讀器使用它來讀出 iframe 的內容。

iframe - 設置高度和寬度

使用height和width屬性指定 iframe 的大小。

默認情況下，高度和寬度以像素為單位指定：

例子

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

或者您可以添加style屬性並使用 CSSheight和width 屬性：

例子

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

參考網址

https://raw.githubusercontent.com/oxalorg/sakura/master/css/normalize.css

https://www.w3schools.com/css/default.asp

⚠️ **GitHub.com Fallback** ⚠️