编译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 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。