문제

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

도움이 되었습니까?

해결책

  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.

다른 팁

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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top