溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Bootstrap前端框架怎么使用

發(fā)布時間：2022-02-24 14:06:21 來源：億速云 閱讀：138 作者：iii 欄目：開發(fā)技術(shù)

今天小編給大家分享一下Bootstrap前端框架怎么使用的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

Bootstrap 簡介： Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目。 2011年，twitter 的“一小撮”工程師為了提高他們內(nèi)部的分析和管理能力，用業(yè)余時間為他們的產(chǎn)品構(gòu)建了一套易用、優(yōu)雅、靈活、可擴展的前端工具集——BootStrap。Bootstrap 由 MARK OTTO 和 Jacob Thornton 所設(shè)計和建立，在 github 上開源之后，迅速成為該站上最多人 watch&fork 的項目。大量工程師踴躍為該項目貢獻(xiàn)代碼，社區(qū)驚人地活躍，代碼版本進(jìn)化非常快速，官方文檔質(zhì)量極其高，同時涌現(xiàn)了許多基于    Bootstrap 建設(shè)的網(wǎng)站：界面清新、簡潔;要素排版利落大方。 
Bootstrap 的特點： 簡單靈活可用于架構(gòu)流行的用戶界面和交互接口的 HTML、CSS、JavaScript 工具集。基于 HTML5、CSS3的Bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計，12列格網(wǎng)，樣式向?qū)臋n，自定義 JQuery 插件，完整的類庫，基于 Less 等。
Bootstrap 的優(yōu)勢：
1.定義了很多的 CSS 樣式和 JS 插件，提高開發(fā)人員的工作效率。
2.響應(yīng)式布局，頁面可以兼容不同分辨率的設(shè)備。
3.豐富的組件，給用戶提供更好的視覺體驗。

一.Bootstrap快速入門

1.下載【Bootstrap】。Bootstrap前端框架怎么使用2.在項目中引入 Bootstrap。

Bootstrap前端框架怎么使用3.創(chuàng)建HTML頁面：

引入Bootstrap必要的資源文件，參考基本模板。注意其中缺少 jquery.js 文件，需自行下載引入到 Bootstrap下的 js 文件夾。
 
基本模板代碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <h2>你好，世界！</h2>
</body>
</html>

2.Bootstrap響應(yīng)式布局【柵格系統(tǒng)】

Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義類，還有強大的 mixin 用于生成更具語義的布局。 

以上就是“Bootstrap前端框架怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手