App下載

Bootstrap前端框架的入門(mén)使用

猿友 2021-02-05 15:21:18 瀏覽數(shù) (2196)
反饋

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

一.Bootstrap快速入門(mén)

1.下載【Bootstrap】。在這里插入圖片描述 2.在項(xiàng)目中引入 Bootstrap。

在這里插入圖片描述 3.創(chuàng)建HTML頁(yè)面:

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

<!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個(gè)meta標(biāo)簽*必須*放在最前面,任何其他內(nèi)容都*必須*跟隨其后! -->
    <title>Bootstrap HelloWorld</title>
?
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴(lài) jQuery,所以必須放在前邊) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <h1>你好,世界!</h1>
</body>
</html>

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

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

3.Bootstrap的CSS樣式和JS插件

具體使用方法參考教程文檔:http://m.hgci.cn/bootstrap/


0 人點(diǎn)贊