Question

I'm experimenting with Dart and am now trying to use Bootstrap for its CSS framework. When I download the latest version of Bootstrap (currently 3.0.3), it has the following file structure:

├── css
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   └── glyphicons-halflings-regular.woff
└── js
    ├── bootstrap.js
    └── bootstrap.min.js

(1) Where do I put all these files, and how do I access them from inside BOTH my Dart source and HTML files? For example, say I want to dynamically change the DOM from inside a Dart file, and add a Bootstrap class to an element - what would this look like? And if I just wanted to give an HTML element a Bootstrap class (inside a .html file), what would this look like?

I assume I might need a Dart project with a package structure something like this:

MyDartApp/
    web/
        myapp.dart
    asset/
        bootstrap/
            css/
                bootstrap.css
                bootstrap.min.css
                bootstrap-theme.css
                bootstrap-them.min.css
            fonts/
                glyphicons-halflings-regular.eot
                glyphicons-halflings-regular.svg
                glyphicons-halflings-regular.ttf
                glyphicons-halflings-regular.woff
            js/
                bootstrap.js
                bootstrap.min.js

But having such little experience with both Dart and Bootstrap, not sure if I am missing anything big. Obviously, I need to package the Bootstrap files in such a way that the asset/ URLs in my Dart/HTML files can access them before/after running pub build.

(2) Also, can I just use the min-version of each CSS/JS file (bootstrap.min.js instead of bootstrap.js, etc.)?

Was it helpful?

Solution

  1. you can use the asset/ folder to put these files. However the builtin server in the editor does not support asset for now, you will have to use pub serve. To access them use /assets/<pkg_name>/<path> (see How to refer to assets). Alternatively you can put those files under /lib/ and access them with packages/<pkg_name>/<path>.
  2. you can use minified versions.

OTHER TIPS

I've been using bookjack which so far has been fine.

Usage First of all in your HTML file, you need to include the CSS resource:

  <head><link rel="stylesheet" href="packages/bootjack/css/bootstrap.min.css"> </head>

There are also some further examples.

Using it like this seems to help keep the project simpler, in that I don't have to worry about where the files actually are, they are in a package.

I found that if I am using Angular Dart and in the view I can do this and it works, but it has to be within the view where the 

<div id="datepicker-inline"></div>

<script>
$( document ).ready(function() {
   console.log($('#datepicker-inline').get(0));
   $('#datepicker-inline').bdatepicker({ inline: true, showOtherMonths:true });
});
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top