- In my previous post we have learnt to install Bootstrap4 using JSPM package manager.
- In this Demo, “We will learn to configure/import Bootstrap 4 in the application”.
- To load CSS file we need to install a JSPM plugin named plugin-css(github:systemjs/plugin-css).This plugin is required to our demo as we have to load bootstrap.css file.
- The plugin-css module can be installed using jspm install css command.The following screenshot shows the terminal with plugin-css installation.
- We have used Babel ES6 transpiler to compile the ES6 related javascript code.
- The code content of updated config.json file are as follows:-
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"babel": "npm:babel-core@5.8.23",
"babel-runtime": "npm:babel-runtime@5.8.20",
"core-js": "npm:core-js@1.1.4",
"css": "github:systemjs/plugin-css@0.1.16",
"twbs/bootstrap": "github:twbs/bootstrap@4.0.0-alpha",
"github:jspm/nodelibs-process@0.1.1": {
"process": "npm:process@0.10.1"
},
"github:twbs/bootstrap@4.0.0-alpha": {
"jquery": "github:components/jquery@2.1.4"
},
"npm:babel-runtime@5.8.20": {
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:core-js@1.1.4": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"process": "github:jspm/nodelibs-process@0.1.1",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
}
}
});
- To demonstrate Bootstrap4 We have created main.js and index.html file.
- The main.js file contains the code to import jquery,bootstrap and bootstrap.css to the application.The code content of main.js file are as follows.
import $ from 'github:components/jquery@2.1.4'; import bootstrap from 'twbs/bootstrap'; import 'twbs/bootstrap/css/bootstrap.css!';
- The index.html file contains the code for calling systemJS loader which imports the main.js file.The index.html also contains HTML elements with Bootstrap4 style classes.The code content of index.html file are as follows:-
<!doctype html>
<html>
<head>
<title>JSPM Bootstrap4 Demo</title>
</head>
<body class="container">
<h1 class="text-primary">text-primary</h1>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-block btn-warning">
btn-lg btn-block btn-warning
</button>
</body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('main');
</script>
</html>
- The following screenshot shows the output of this demo in a chrome browser with a header text and 2 different styled button rendered on the screen.
- The demo code can be downloaded from the following link:-
https://github.com/saan1984/Bootstrap4Demo
