Bootstrap is a front-end framework that provides an excellent way to quickly deliver device-responsive applications. It’s open source and employs common web technology like CSS, HTML, JavaScript and JQuery. And best of all, it can be used to integrate with Spotfire to rapidly create new mobile friendly applications.
Bootstrap uses the concept of “containers”. Each area of the page can be represented as a series of these containers. The “flow” of the containers is determined by the screen size of the viewing device. Developing a single application for multiple devices is made possible by this responsive container behavior, which can be customized to accommodate unique designs.
The best way to get started quickly is to use one of the hundreds of freely available Bootstrap templates. This is “standing on the shoulders of giants” and highly recommended!
The following example was created with a template from Start Bootstrap, which is one of the many online repositories of free themes and templates. The one used here is the “2 Column Portfolio” template, which is a grid-style portfolio template. Click here for the landing page.
Here is a view of just the template. It’s up to you to customize the template and drop in the Spotfire pieces.
By default, Spotfire content will resize to fit the container it’s placed in. This makes the Bootstrap container layout ideal – the framework takes care of the details of adjusting the layout to fit the device. In this example, an analysis from Spotfire Cloud was embedded in each container using an iFrame. The JavaScript API can also be used to avoid directly using an iFrame.
In this “2 Column Portfolio” template, the 2 x 2 grid will automatically flow to a stacked panel layout if the device size is too small to fit 2 panels side-by-side.
By narrowing the size of the browser, you’ll see the panels reflow to accommodative the smaller screen size.
Reference Links:
