9th thing - bootstrap

jelz · Sep 25, 2013 · d2f3179 · d2f3179
1 parent 0cfbf44
commit d2f3179
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 2 deletions.
diff --git a/09-bootstrap/app/app.js b/09-bootstrap/app/app.js
@@ -0,0 +1,20 @@
+define([
+ 'bootstrap/modal', 'bootstrap/tooltip', 'bootstrap/transition'
+], function () {
+ return {
+ start: function () {
+ $('#with-tooltip').tooltip({
+ placement: 'right',
+ title: 'Hello from tooltip!'
+ });
+
+ $('#show-modal').on('click', function () {
+ $('#modal').modal('show');
+ });
+
+ $('#modal .btn-primary').on('click', function () {
+ $('#modal').modal('hide');
+ })
+ }
+ };
+});
diff --git a/09-bootstrap/app/main.js b/09-bootstrap/app/main.js
@@ -0,0 +1,20 @@
+require.config({
+ paths: {
+ jquery: '../bower_components/jquery/jquery'
+ },
+ packages: [
+ 'bootstrap', {
+ name: 'bootstrap',
+ location: '../bower_components/bootstrap/js'
+ }
+ ],
+ shim: {
+ bootstrap: ['jquery']
+ }
+});
+
+require(['jquery', 'app'], function ($, app) {
+ $(function () {
+ app.start();
+ });
+});
diff --git a/09-bootstrap/bower.json b/09-bootstrap/bower.json
@@ -0,0 +1,21 @@
+{
+ "name": "09 Bootstrap",
+ "version": "0.0.1",
+ "homepage": "https://github.com/jelz/10-things-about-amd",
+ "authors": [
+ "Jakub Elzbieciak <[email protected]>"
+ ],
+ "license": "MIT",
+ "private": true,
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests"
+ ],
+ "dependencies": {
+ "requirejs": "~2.1.8",
+ "bootstrap": "~3.0.0"
+ }
+}
diff --git a/09-bootstrap/index.html b/09-bootstrap/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>09 Bootstrap</title>
+ <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
+ </head>
+ <body>
+ <div class="container">
+ <h1>09 Bootstrap</h1>
+ <button class="btn btn-primary" id="show-modal">Show modal</button>
+ <button class="btn btn-default" id="with-tooltip">It has tooltip</button>
+ </div>
+
+ <div class="modal fade" id="modal">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h4 class="modal-title">Welcome to modal!</h4>
+ </div>
+ <div class="modal-body">
+ <p>Whoops, nothing there.</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+ <button type="button" class="btn btn-primary">Save (nothing)</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <script src="bower_components/requirejs/require.js"
+ data-main="app/main.js"></script>
+ </body>
+</html>
diff --git a/README.md b/README.md
@@ -9,8 +9,8 @@
 5. __text!__ - don't store all your templates in one template überfile (applies to any other text resource, too)
 6. __i18n!__ - localize JS apps right way
 7. __jQuery__ - use jQuery in an AMD manner
-8. __Bootstrap__ - customize your libraries with no effort (applies to many other libs, too) (todo)
-9. __Packages__ - find best place for every piece of code (todo)
+8. __Packages__ - find the best place for every piece of code (todo)
+9. __Bootstrap__ - customize your libraries with no effort (applies to many other libs, too)
 10. __browserify__ - know alternative (todo)
 
 As you can see: work is in progress :)