Menu
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.)?
876
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>.
104
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.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
