bootstrap是國內開發的嗎-前端問答-PHP中文網

bootstrap是國內開發的嗎

我的第一个 Bootstrap 页面

第一列

第二列

第三列

首頁

web前端

前端問答

bootstrap是國內開發的嗎

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2022 pm 04:56 PM

bootstrap

bootstrap不是國內開發的，而是美國Twitter公司的設計師「Mark Otto」和「Jacob Thornton」開發的；Bootstrap是基於HTML、css、JavaScript開發的用於快速開發web應用程式和網站的前端框架。

bootstrap是國內開發的嗎

本教學操作環境：Windows10系統、bootstrap5版、DELL G3電腦

bootstrap是國內開發的嗎

bootstrap不是國內開發的

Bootstrap 是一個用於快速開發Web 應用程式和網站的前端框架。 Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。 Bootstrap 是 2011 年八月在 GitHub 上發布的開源產品。

為什麼要使用 Bootstrap？

行動裝置優先：自 Bootstrap 3 起，框架包含了貫穿整個庫的行動裝置優先的樣式。

瀏覽器支援：所有的主流瀏覽器都支援 Bootstrap。

Internet Explorer Firefox Opera Google Chrome Safari

容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。

響應式設計：Bootstrap 的響應式 CSS 能夠自適應於桌上型電腦、平板電腦和手機。更多有關響應式設計的內容詳見 Bootstrap 響應式設計。

響應式設計

它為開發人員建立介面提供了一個簡潔統一的解決方案。

它包含了功能強大的內建元件，易於自訂。

它還提供了基於 Web 的客製化。

它是開源的。

Bootstrap 套件的內容

基本架構：Bootstrap 提供了一個有網格系統、連結樣式、背景的基本架構。這將在 Bootstrap 基本結構部分詳細講解。

CSS：Bootstrap 自帶以下功能：全域的 CSS 設定、定義基本的 HTML 元素樣式、可擴充的 class，以及先進的網格系統。這將在 Bootstrap CSS 部分詳細講解。

元件：Bootstrap 包含了十幾個可重複使用的元件，用於建立圖像、下拉式選單、導航、警告框、彈出框等等。這將在佈局元件部分詳細講解。

JavaScript 外掛程式：Bootstrap 包含了十幾個自訂的 jQuery 外掛程式。您可以直接包含所有的插件，也可以逐一包含這些插件。這將在 Bootstrap 插件部分詳細講解。

自訂：您可以自訂 Bootstrap 的元件、LESS 變數和 jQuery 外掛來取得自己的版本。

範例如下：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
<div class="container">
  <div class="jumbotron">
    <h1 id="我的第一个-nbsp-Bootstrap-nbsp-页面">我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小，查看响应式效果！</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3 id="第一列">第一列</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3 id="第二列">第二列</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3 id="第三列">第三列</h3>        
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
  </div>
</div>
</body>
</html>

登入後複製

輸出結果：

bootstrap是國內開發的嗎

#相關推薦：bootstrap教學

以上是bootstrap是國內開發的嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1324

PHP教程

1272

C# 教程

1251

Related knowledge

bootstrap搜索欄怎麼獲取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

bootstrap垂直居中怎麼弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 實現垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 類，將元素置於 flexbox 容器內。 align-items-center 類法：對於不支持 flexbox 的瀏覽器，使用 align-items-center 類，前提是父元素具有已定義的高度。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。