Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Dart and Bootstrap

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.)?

like image 876
IAmYourFaja Avatar asked Dec 23 '13 15:12

IAmYourFaja


2 Answers

  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.
like image 104
Alexandre Ardhuin Avatar answered Oct 09 '22 21:10

Alexandre Ardhuin


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.

like image 23
Paul Collingwood Avatar answered Oct 09 '22 23:10

Paul Collingwood