bootstrap是js框架嗎-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

bootstrap是js框架嗎

(*-*)浩

Jul 18, 2019 am 11:25 AM

bootstrap

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，是一個CSS/HTML框架。

它是由Twitter的設計師Mark Otto和Jacob Thornton合作開發。（推薦學習：Bootstrap影片教學）

Bootstrap提供了優雅的HTML和CSS規範，它也就是由動態CSS語言Less寫成。

Bootstrap一推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。

Bootstrap是基於jQuery框架開發的，它在jQuery框架的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格，並兼容大部分jQuery插件。

Bootstrap包含了豐富的Web元件，根據這些元件，可以快速的建立一個漂亮、功能完整的網站。

其中包含以下元件：下拉式選單、按鈕群組、按鈕下拉式選單、導覽、分頁、排版、縮圖、警告對話方塊、進度列、媒體物件等

#我們設計的網站中就有使用到下拉式選單和滑動廣告圖等，雖然說使用插件能使製作設計網頁簡單，但是在使用之前，我們對這個新的知識內容進行了學習，了解其功能運作，才能使其貼合地使用在我們設計的內容板塊上

例如：下拉選單的實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
    <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="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
            data-toggle="dropdown">
        主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

</body>
</html>

登入後複製

更多Bootstrap相關技術文章，請造訪Bootstrap教程欄位進行學習！

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

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7940

Java教學

1652

CakePHP 教程

1412

Laravel 教程

1303

PHP教程

1250

Related knowledge

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

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

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

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

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 的網格系統、組件和样式創建響應式網站和應用程序。