編譯bootstrap

A. bootstrap-sass 中的js怎麼編譯

：首先boostrap；引入css文件引入js文件載址二：CDN引入（css）
-

B. 使用什麼編輯bootstrap3

1. Bootstrap Magic
這是一個 Bootstrap 主題生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一個鮮活的用戶修改預覽。它包括了各種各樣的導入，一個顏色選擇器和智能的預先輸入。更神奇的是，Bootstrap 會根據用戶的每個選擇來重新簡歷框架，方便用戶的下載和使用。
2. BootSwatchr
BootSwatchr 是由 Drew Strickiand 獨立開發和維護的，是唯一支持從右到左語言顯示的 Bootstrap 自定義構建工具，這也是它的特色之一。BootSwatchr 是個可視化的工具，可以從底層開始創建 Bootstrap 主題。
3. Bootstrap Live Editor
Bootstrap Live Editor 是個所見即所得的構建 Bootstrap 的編輯器。在 Bootstrap 准備好的內容和代碼片段的基礎上提供一個又好又優雅的方法來編輯和美化 html，也因此它是個明智的選擇。除此之外，它還包括高級的選項比如按鈕配置，自定義標簽和為用戶做最明智最有益的選擇。
4. Fancy Boot
Fancyboot 是個非常有用的 Bootstrap 自定義工具，允許用戶編輯 Bootstrap 的配置，自動預覽他們的修改結果。通過滑動菜單可以選擇需要使用的插件和組件。當用戶做好了相應的修改，可以下載一個包含用戶所使用的 jQuery 插件的編譯好的和簡化後的 CSS 文件。
5. Style Bootstrap
Style Bootstrap 是個非常棒的內置瀏覽器的 GUI 實用工具，幫助用戶自定義 Twitter Bootstrap 外觀。它非常容易進行自定義操作。從 body 風格，字體排版，按鈕，導航，格式，通知提示和其他用戶很容易根據自己的意願自定義的元素。除了強大的自定義功能，它還可以很容易生成可下載的 CSS 文件。
6. Lavish
Lavish 是個幫助用戶從一個圖像中定製自己喜歡的 Bootstrap 配色方案。用戶可以從圖像中選擇各種顏色用在 body 背景，鏈接，頭部，菜單，標簽，文本，下拉菜單等等元素上。一旦你確定了 Bootstrap 配色方案，就可以很方便的下載相應的 Boostrap.css 文件。
7. Bootstrap ThemeRoller
Bootstrap ThemeRoller 是個直觀的 web 應用程序， 提供一個可視化的界面讓用戶按照自己的風格創建屬於自己的 Bootstrap 主題。有了這個工具，用戶可以自定義顏色，大小，字體，格式，表，按鈕，警告信息，導航條，菜單等等元素。 這個應用還會幫用戶創建的每種風格都生成唯一的一個 URL ，這樣就可以保存用戶所有的設置。更不可思議的是，當用戶離開的時候，用戶可以停止或者恢復自己

C. bootstrap用gulp編譯怎麼樣

gulp在3.9版本裡面增加了對babel的支持，因此我們可以直接在gulpfile裡面使用ES6(ES2015)了。升級gulp版本首先要檢測一下我們的gulp版本，確保CLI版本及Local版本都在3.9之上:gulp-v版本如下：CLIversion3.9.0Localversion3.9.0若版本過低，我們可以通過以下方式進行升級，這里將同時升級CLI版本和Local版本：npminstallgulp-g&&npminstallgulp--save-dev安裝babel我們需要安裝babel-core及babel-preset-es2015來轉換ES6代碼：npminstallbabel-corebabel-preset-es2015--save-dev然後，創建一個.babelrc文件來使用es2015preset：touch.babelrc寫入如下內容：{"presets":["es2015"]}接下來就是使用ES6語法重寫gulpfile了。使用ES6語法重寫gulpfile首先，重命名gulpfile.js為gulpfile.babel.js，這樣gulp執行前會自動調用babel轉換文件。mvgulpfile.jsgulpfile.babel.js然後在gulpfile.babel.js裡面用ES6語法寫些內容，如下：'usestrict';importgulpfrom'gulp';importlessfrom'gulp-less';constpaths={less:'less/',dest:'build/'};gulp.task('less',()=>{gulp.src(`${paths.less}**/*.less`).pipe(less()).pipe(gulp.dest(`${paths.dest}css/`));});然後執行gulp命令：gulpless這里和原來一樣，以前的命令怎麼用現在還是怎麼用!GitHub源碼：using-es6-with-gulp

D. 怎麼編譯bootstrap3 less

它有二個版本，其中一個是已經編繹好的，你拿 去使用就是，如果對默認的設置不滿意，你可以用你自己的樣式表來重新寫一下，會覆蓋bootstrap的樣式。

E. 如何編譯bootstrap-4.0.0源碼

因為bootstrap 4.0.0將放棄less轉用sass來處理css，所以開發環境需要裝SASS插件（必須先安裝Ruby）。
安裝Ruby，略。
安裝SASS
gem install sass

安裝Node.js，略。
安裝grunt
npm install -g grunt

安裝node-sass，大多數環境正常。安裝不成功的話可以看後面的手動編譯css部分。
npm install -g node-sass

grunt打包，加強制參數
grunt --force

在dist目錄下編譯出下列文件
|-- dist
|-- css
|-- bootstrap.css
|-- bootstrap.css.map
|-- bootstrap.min.css
|-- bootstrap.min.css.map
|-- js
|-- bootstrap.js
|-- bootstrap.min.js
|-- npm.js
|-- umd
|-- alert.js

|-- button.js
|-- carousel.js
|-- collapse.js
|-- dropdown.js
|-- modal.js
|-- popover.js
|-- scrollspy.js
|-- tab.js
|-- tooltip.js
|-- util.js

scsslint檢查時可能會報錯，可以將bundleExcc關掉，不用本地的
//You can choose to have your gems installed via bundler and if so, set this option to true to use the local gems.
scsslint: {
options: {
bundleExec: false,
config: 'scss/.scss-lint.yml',
reporterOutput: null
},
src: ['scss/*.scss', '!scss/_normalize.scss']
}

手動編譯css，進入scss目錄會看到大量的scss文件。主要關注下面幾個
|-- scss
|-- ...
|-- bootstrap.scss
|-- bootstrap-flex.scss
|-- bootstrap-grid.scss
|-- bootstrap-reboot.scss
|-- ...

可以用sass命令直接生成相應的css文件和map文件
sass bootstrap.scss bootstrap.css
sass bootstrap-flex.scss bootstrap-flex.css
sass bootstrap-grid.scss bootstrap-grid.css
sass bootstrap-reboot.scss bootstrap-reboot.css

F. 如何編譯bootstrap

不用編譯的吖，只是純純的html,css,js而已，有瀏覽器就可以直接運行了

G. 如何定製Bootstrap

bootstrap已經作為前端開發必不可少的框架之一，應用bootstrap使得我們對布局、樣式的設定變得非常簡單。
但bootstrap提供的默認樣式往往不能滿足我們的需求，從而定製化bootstrap成為我們經常需要做的工作，本文就如何更高效更可維護地定製bootstrap做一下探討。

如下圖，在你的button 中加入bootstrap的class: btn btn-primary,就可以將默認的button（左邊）變成右邊的樣式。

可如果我們想應用自己的樣式呢？比如我們想要擁有圓角的button。
通常，我們可以直接覆蓋bootstrap的樣式。
我們在自己的項目目錄下新建my-custom.css文件，加入如下代碼：
.btn { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}

將my-custom.css文件引用放到bootstrap.css文件後面，我們定義的btn樣式就會覆蓋原有的樣式（註：這里的『覆蓋』指的是增量疊加式的覆蓋）。
<link rel="stylesheet" href="boostrap.css"><link rel="stylesheet" href="my-custom.css">

但這種方法有它的優缺點，
優點：不會改變你的工作流程。你可以快速直接修改你的樣式，即使是你的網站引用了其他的類似bootstrap的框架樣式，你都可以在同一個地方進行統一的定製。
缺點：但是對於更徹底的修改(比如重新設計導航欄)或是非局部的修改(比如修改適用於整個網站的高亮顏色)來說，這樣東一塊，西一塊的覆蓋樣式更像是一種打補丁式的解決方案。而且你的新樣式要添加到Bootstrap的默認樣式表裡，讓本已經100 KB的文件越發臃腫。如果你不僅僅想要做一些覆蓋，那就要考慮一種更具擴展性的方法了。
另一種方法是生成一個自定義構建的bootstrap。
我們可以使用官方的構建器，你可以對bootstrap中樣式變數進行自定義。如下圖所示：

bootstrap 是基於less定製的，如果你不熟悉less語法，建議到其官網（http://lesscss.org/）學習一下，很簡單，了解並學會使用它用不了多長時間。
定製好你的變數後點擊download按鈕就會生成一套屬於你的bootstrap框架了。同時，網上還有很多類似定製bootstrap的網站，如果你不習慣官網的可以去這其它的網站試試，比如Bootswatchr網站使用變數來組織，而StyleBootstrap則使用組件。BootTheme添加了扔骰子特性來隨機設置值。如果幸運女神不站在你這邊，Lavish能夠根據你提供的任何圖片來生成一個主題，PaintStrap則是根據已有的配色方案來生成。
當然，這種方法也有它的優缺點，
優點：相比上一種方法，它簡便了你對整體網站的修改。
缺點：首先你很難一開始就確定網站所有的樣式風格，當然你可以在確定好了後再生成一個最終版本。所以這就引入一個問題，如果你還要時不時更換你的樣式，你同樣需要找到bootstrap樣式源文件編輯，你可能還要用到第一種方法，比如我要使用圓角的帶陰影的button，光定製就不能滿足我的需求，再者，如果面對bootstrap升級的問題，你還需要重新根據你的樣式構建一個新版本的bootstrap，這樣要真的做起來，會非常的麻煩。
最後一種方法是深度定製bootstrap less
首先獲得bootstrap的源碼，
打開源碼，你會發現Bootstrap的樣式是用LESS而不是CSS寫的。LESS 是一種動態樣式表語言，相比於CSS，它支持多種優秀特性，包括選擇器嵌套，創建變數(就像在上面生成器中使用的)。一旦寫完，你可以選擇將LESS代碼預先或在運行時編譯成 CSS。如果你喜歡 Sass，可以使用這個適用於Sass的Bootstrap。
在 less 文件夾中，你會看到許多按照組件來劃分的 LESS 文件。

我們打開bootstrap.less文件看看裡面寫的是什麼：
View Code

實際上，bootstrap是通過編譯bootstrap.less這一個文件而生成整個bootstrap.css文件的。我們看到bootstrap.less的作用僅僅是引入其他文件。這樣，我們定製化的工作就好辦了。

以下這些文件是你要注意的：
bootstrap.less:
這個是核心文件。它用來引入其他文件，最終由你來編譯它。
reset.less:
始終是最先引入的文件。
variables.less 和 mixins.less:
這兩個文件總是同時出現，因為其他文件都依賴於它們。前一個文件包含了在生成器網站上使用的相同的變數。
utilities.less
這個文件總是最後引入，你可以把想要覆蓋的類寫到這里。
我們定製的思路就是，找到我們需要定製的組件和相對應的變數，對其修改，然後編譯成我們自己的bootstrap.css即可。
下面講講具體實現方法。
確保你已經安裝好Less, 為了不讓我們修改的內容與原始文件重合在一起，我們需要模塊化的修改。
首先下載bootstrap源碼，下載後就不需要對其做任何的改動了。我們單獨建立一個文件夾（文件目錄只要能引用到bootstrap的less文件就可以），取名為custom-bootstrap，其中包含以下三個文件：
custom-variables.less:
這個文件包含你要定製的變數。
custom-other.less:
這個文件中包含了那些無法通過修改變數完成定製的內容，比如增加或禁用button的text-shandow屬性。
custom-bootstrap.less
這是新的「核心」文件。我們將把它編譯成CSS。與原始的 LESS文件一樣，它使用下面的命令來引入上面那兩個自定義文件（記住要保證文件正確的引用順序）
1 @import "../bootstrap/less/bootstrap.less"; //這個引用到原有的bootstrap文件2 @import "custom-variables.less"; 3 @import "custom-other.less"; 4 @import "../bootstrap/less/utilities.less"; //我們同樣要引用原生的utilities.less，因為我們要保證該文件始終最後一個被導入

這時，我們只要編譯custom-bootstrap.less就可以了。
有一些需要注意的是，custom-variables.less 不需要拷貝原有文件的所有內容，只需要拷貝和你要定製的組件相關的變數就可以了，如果你這樣做了，單獨編譯custom-variables.less或custom-other.less會提示缺少變數定義的錯誤，但這沒關系，你只要保證編譯custom-bootstrap.less沒有錯誤就可以了。

這種方法的優點在於，將定製的變化與原有庫代碼很好的隔離，卻又不失可維護性。即使今後升級bootstrap版本，我們也不要擔心重新構建樣式框架了。

H. 如何使用bootstrap框架 bootstrap入門必看

為什麼使用這個框架呢？
1、瀏覽器支持，所有的主流瀏覽器支持，包括：IE、firefox、opera、chrome、Safari等。
2、容易上手，掌握html+css基礎即可。
3、具有設備響應式兼容。bootstrap的響應式css能夠自適應於台式機、平板電報和手機。
4、包含很多功能強大內置組件，易於定製。
5、開源。

在其官網下載，包括三種形式，我們選擇用於生產環境的bootstrap，這樣就無須先學習sass或者less的編譯，可以著重於學習bootstrap的應用。下載文件為zip格式，解壓後包括三個文件夾。css即bootstrap的樣式文件，js文件夾即其js文件，fonts為其字體文件夾。

我們暫且只用到css和js，點開css文件夾和js文件夾，出現如下圖。css文件夾中，其中，.css文件是編譯好的css文件，同我們平常使用的沒有區別，.min.css是壓縮後的css文件，可以使用這個文件節省大小，.map是映射less文件和css文件對應位置，暫且忽略，復制.min.css文件到自己項目的css文件夾中，同理，復制js中的.min.js文件到自己項目的js文件夾中。

下圖為其基本模板。由於bootstrap是用jquery編寫，所以需要jquery支持，我們使用的是在線jquery庫。在瀏覽器查看效果。h1第一級標題使用的樣式是bootstrap的樣式，而非h1原本的樣式。

在head的最開頭（必須為最開始，可以在編碼之後）加上
<meta name="viewport" content="width=device-width, initial-scale=1">
此為移動端開發經常用的，可以養成好習慣每個網頁都添加，可確保適當的觸屏縮放和顯示比例。
表示：當前的viewport的寬度為設備寬度，當然你也可以設置為具體數值，初始顯示為原始比例顯示。content共有六個屬性：width、height（不常使用）、initial-scale、maximum-scale、minimum-scale、user-scalable

布局容器的使用。
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器，包括兩個：.container 類用於固定寬度並支持響應式布局的容器；
.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。
如下圖是一個實例。container中包含的為bootstrap顯示的樣式。

其支持響應式布局，將瀏覽器窗口拉寬和拉窄效果不同。

8
在bootstrap官網上有較多實例和組件，可以根據個人需要定製化使用，創作屬於自己風格的頁面。

I. 為什麼gcc編譯自己要採用bootstrap這種編譯方式

提示 gcc：not command；就表示是gcc命令沒找到，這個和你的arm-linux-gcc沒關系，因為如果arm-linux-gcc找不到的話，會提示arm-linux-gcc找不到的，所以你就只能猜是不是host邊的gcc沒找到，然後在你的主機端安裝gcc開發包就可以了。

嵌入式一種重要的能力就是debug，自己鍛煉下吧，以後這種簡單的問題就能搞定了。

J. 預編譯的 bootstrap 怎麼用

下載 Bootstrap
可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。

Download Bootstrap：下載 Bootstrap。點擊該按鈕，您可以下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。