How to update and include Twitter Bootstrap 3 on w

2019-02-08 13:08发布

I used yo webapp or yo angular to create new a project, and I received Bootstrap include is version 2.3.2, but I want use the latest version of Bootstrap.

How can I update the Bootstrap package with command prompt and later update when create new webapp or yo angular, choose include Twitter Bootstrap is last version?

3条回答
干净又极端
2楼-- · 2019-02-08 13:34

For sass Bootstrap update:

This Works for me:

bower install angular-bootstrap
bower install sass-bootstrap

and select the new versions of both...

maybe should add a --save

Note: sass-bootstrap is bean deprecated, is now a official bower for sass version of bootstrap https://github.com/twbs/bootstrap-sass but i dont tried it.

查看更多
霸刀☆藐视天下
3楼-- · 2019-02-08 13:41

Yeoman's webapp & angular generators grab Sass for Bootstrap, which is based on the 2.3.2 build of Twitter Bootstrap.

After you run yo webapp or yo angular, you can add Bootstrap 3.0 by running the following command.

$ bower install --save bootstrap

This will download Bootstrap 3.0 for you.

查看更多
够拽才男人
4楼-- · 2019-02-08 13:46

@micjamking answer is a really good hint, but since with Yeoman things should be easier, I'll save you some googling:

  1. yo angular - Say 'No' to Bootstrap here - otherwise it'll download 2.x version
  2. bower install --save bootstrap
  3. npm install --save-dev grunt-bower-install
  4. edit Gruntfile.js - insert marked lines:

    // ...
    } catch (e) {}
    
    grunt.loadNpmTasks('grunt-bower-install');             // INSERT
    
    grunt.initConfig({
        yeoman: yeomanConfig,
        'bower-install': {                                 // INSERT BEGIN
            target: {                                      //   .
                html: '<%= yeoman.app %>/index.html',      //   .
                ignorePath: '<%= yeoman.app %>/'           //   .
            }                                              //   .
        },                                                 // INSERT END
        watch: {
            coffee: {
                files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
                tasks: ['coffee:dist']
    // ...
    
  5. edit app/index.html - insert :

    <!-- bower:css -->
    <!-- endbower -->
    

    and:

    <!-- bower:js -->
    <!-- endbower -->
    

    where appropriate - those will inject references to bower-managed resources (bootstrap's stylesheet and JS in our case).

    update 10/5/2013: Consider placing bower:xxx inside build:xxx.
    In our case, bower:css inside build:css and bower:js inside build:js.
    This is needed for minification to work when assembling dist. However I consider this approach not so perfect - see Remarks below. I'm excused a little bit, since this is the very same way the bootstrap version obtained by Yeoman by default gets included in our app :-P
    Note: To get css minification working you might need changing build:css(.tmp) to build:css({.tmp,app}).

  6. grunt bower-install

Ready. Now run server (grunt server) and Bootstrap 3 will be available.


Remarks - Update 10/5/2013 - inspired by @Luke's enquiry in a comment:

Based on this I added one sub-step to make dist minification work.

Bower's injecting works, so does minifying, however I'm not so happy with this approach.
Reasons:

  1. [minor] We're not using already minified resources obtained by bower.
  2. Minifying ALL kinds of CSS/JS into a SINGLE file is a pretty lame idea. A better way to include external dependencies in your application would be to have a switch between CDN-fetch (dist) and local copies obtained with bower (dev). Sth like maven profiles.
  3. Depending on the application size, downloading all-in-one resources, particularly JavaScripts, will slow down first encounter with our application.
    Later on the rest of the application will be loaded faster, true, but the first time user enters our page, those bulky single-filers will have to be downloaded preemptively.

@yao tony also hadn't found this approach cool - see the referenced question.

Update Nov 2013: You can use grunt's cdnify task. It's cool


Software versions I was using:

user@machine:~/somewhere $ yo -v; grunt --version; bower -v
1.0.4
grunt-cli v0.1.9
grunt v0.4.1
1.2.6
查看更多
登录 后发表回答