Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap4XPages - an introduction

I presented this to the members

  • Login to see the comments

  • Be the first to like this

Bootstrap4XPages - an introduction

  1. 1. Bootstrap4XPages Introduction Per Henrik Lausten, august 2014
  2. 2. DanNotes 52nd conference, November 19- 20: submit your abstracts now at New on OpenNTF: JUnit testing in XPages: .xsp
  3. 3. What is Bootstrap? "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web." • Originally created by a designer and a developer at Twitter in mid-2010 • Originally released on Friday, August 19, 2011 • Github: > 70K stars (#1) and >26K forks (#3) • Very popular: > 3.5 million web sites use Bootstrap: • Getting started:
  4. 4. What is Bootstrap4XPages? "This project provides the Twitter Bootstrap rendering technology to XPages. The goal is to enable this new rendering through a dedicated theme, without having to change the application pages. " • Very easy way to use Bootstrap with XPages applications • OSGi plugin for XPages • Includes Bootstrap CSS, Bootstrap JS and jQuery (latest version includes Bootstrap 3.2 and jQuery 1.11) • Bootstrap rendering for all XPages components • Just change your theme! • Available on • Also part of OpenNTF Essentials
  5. 5. Getting started • Install the plugin on the server using an update site • Install the plugin in Domino Designer using the same update site • Pick a random XPages app • Enable the Bootstrap library in Xsp Properties • Change your theme: <theme extends="bootstrapv3.2.0" … <theme extends="bootstrapv3.2.0_3d" … • Clean, build and enjoy 
  6. 6. Demo • Application Layout • Navigator • View • Dialog • Select2 • Responsive • Bootstrap CSS classes