欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

前端框架bootstrap如何安裝-創(chuàng)新互聯(lián)

小編給大家分享一下前端框架bootstrap如何安裝，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設(shè)、基于HTML5技術(shù)的Web開發(fā)、手機(jī)站開發(fā)、微信開發(fā)等互聯(lián)網(wǎng)應(yīng)用服務(wù)。成都創(chuàng)新互聯(lián)始終關(guān)注著互聯(lián)網(wǎng)行業(yè)的前沿動(dòng)態(tài)，創(chuàng)新互聯(lián)堅(jiān)信：真誠(chéng)的態(tài)度，勤奮的工作是我們贏得客戶信賴的基礎(chǔ)；而不斷創(chuàng)新、力求完美，才是創(chuàng)新互聯(lián)共同邁向美好未來(lái)的保證。

bootstrap的安裝方法：1、在Bootstrap官網(wǎng)下載Bootstrap文件，然后使用<link>和<script>來(lái)引用；2、通過(guò)Bower進(jìn)行安裝；3、通過(guò)npm進(jìn)行安裝；4、通過(guò)Composer進(jìn)行安裝即可。

Bootstrap是前端開發(fā)中比較受歡迎的框架，簡(jiǎn)潔且靈活。它基于HTML、CSS和JavaScript，HTML定義頁(yè)面元素，CSS定義頁(yè)面布局，而JavaScript負(fù)責(zé)頁(yè)面元素的響應(yīng)。Bootstrap將HTML、CSS和JavaScript封裝成一個(gè)個(gè)功能組件，用起來(lái)簡(jiǎn)單，粗暴。

Bootstrap 怎么安裝？

1、在Bootstrap官網(wǎng)下載Bootstrap文件，然后使用<link>和<script>來(lái)引用

登錄Bootstrap官網(wǎng)

前端框架bootstrap如何安裝

下載Bootstrap

前端框架bootstrap如何安裝

Download Bootstrap：下載預(yù)編譯和壓縮版Bootstrap（不含文檔和源碼）。

Download code：Bootstrap源碼，如官網(wǎng)介紹，需要編譯Less文件 和一些安裝。

剛接觸Bootstrap的話建議下載第一個(gè)，下載下來(lái)直接用。

文件結(jié)構(gòu)

下載下來(lái)的文件是壓縮包，我們解壓之后可以看到文件的結(jié)構(gòu)。

前端框架bootstrap如何安裝

html使用Bootstrap

html使用Bootstrap需要引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，引用這幾個(gè)文件可以讓一個(gè)常規(guī)的 HTML 文件變?yōu)槭褂昧?Bootstrap 的模板。

方式一：html與Bootstrap文件夾放在一起

我們前面已經(jīng)下載了預(yù)編輯的Bootstrap解壓出來(lái)得到了Bootstrap文件夾，只要把html與Bootstrap文件夾放在一起，然后用相對(duì)路徑引用jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件即可。

方式二：html引用CDN中的jquery.js、bootstrap.min.js 和 bootstrap.min.css

很多CDN服務(wù)已經(jīng)上傳有這幾個(gè)文件了，直接調(diào)用就好。

例如:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>在線嘗試 Bootstrap 實(shí)例</title> 
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
  
  <h2>Hello, world!</h2> 
  
</body> 
</html>

此外，你還可以使用以下的 CDN 服務(wù)：

國(guó)內(nèi)推薦使用：https://www.staticfile.org/

國(guó)際推薦使用：https://cdnjs.com/

2、通過(guò) Bower 進(jìn)行安裝

還可以通過(guò) Bower 安裝并管理 Bootstrap 的 Less、CSS、JavaScript 和字體文件。

$ bower install bootstrap

3、通過(guò) npm 進(jìn)行安裝

你還可以利用 npm 工具來(lái)安裝 Bootstrap：

$ npm install bootstrap@3

require('bootstrap') 代碼的作用是加載 Bootstrap 的所有 jQuery 插件。其中，bootstrap 模塊自身并不導(dǎo)出任何內(nèi)容。你可以通過(guò)加載安裝包頂級(jí)目錄下的 /js/*.js 文件的方式手動(dòng)加載單個(gè)的 Bootstrap 插件。

Bootstrap 的 package.json 文件包含了一些額外的元數(shù)據(jù)：

less - Bootstrap 源碼的入口 Less 文件的路徑

style - Bootstrap 的未壓縮 CSS 文件的路徑

4、通過(guò) Composer 進(jìn)行安裝

通過(guò) Composer （中文官網(wǎng)：Composer 中文網(wǎng)）也可以安裝 Bootstrap 安裝包，其中包括 Less、CSS、JavaScript 和 fonts 文件：

$ composer require twbs/bootstrap

編譯 Less/Sass 源碼需要注意的事項(xiàng)

Bootstrap 利用 Autoprefixer 自動(dòng)為 某些 CSS 屬性添加針對(duì)特定廠商的前綴。如果你是從 Less/Sass 源碼編譯 Bootstrap 的，并且沒(méi)有使用 Bootstrap 自帶的 Gruntfile 文件，那你就必須將 Autoprefixer 集成到你的編譯工具和編譯過(guò)程中。如果你使用的是我們預(yù)先編譯好的 Bootstrap 文件或者使用的是我們提供的 Gruntfile 文件，那就無(wú)需操心了，我們已經(jīng)將這些工作替你搞定了。

以上是“前端框架bootstrap如何安裝”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：前端框架bootstrap如何安裝-創(chuàng)新互聯(lián)
地址分享：http://chinadenli.net/article16/dgpgdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、搜索引擎優(yōu)化、建站公司、App設(shè)計(jì)、小程序開發(fā)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)