Bootstrap4XPages 
Introduction 
Per Henrik Lausten 
Notesnet.dk, august 2014
DanNotes 52nd conference, November 19- 
20: submit your abstracts now at 
http://speakers.dannotes.dk/ 
New on OpenNTF: JUnit testing in XPages: 
http://www.openntf.org/p/org.openntf.junit 
.xsp
What is Bootstrap? 
"Bootstrap is the most popular HTML, CSS, and JS framework for developing 
responsive, mobile first projects on the web." 
http://getbootstrap.com/ 
https://github.com/twbs/bootstrap 
• 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: 
http://trends.builtwith.com/docinfo/Twitter-Bootstrap 
• Getting started: http://getbootstrap.com/getting-started/
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. " 
http://bootstrap4xpages.openntf.org/ 
https://github.com/OpenNTF/Bootstrap4XPages 
• 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 OpenNTF.org 
• Also part of OpenNTF Essentials
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 
Demo 
• Application Layout 
• Navigator 
• View 
• Dialog 
• Select2 
• Responsive 
• Bootstrap CSS classes

Bootstrap4XPages - an introduction

  • 1.
    Bootstrap4XPages Introduction PerHenrik Lausten Notesnet.dk, august 2014
  • 2.
    DanNotes 52nd conference,November 19- 20: submit your abstracts now at http://speakers.dannotes.dk/ New on OpenNTF: JUnit testing in XPages: http://www.openntf.org/p/org.openntf.junit .xsp
  • 3.
    What is Bootstrap? "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web." http://getbootstrap.com/ https://github.com/twbs/bootstrap • 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: http://trends.builtwith.com/docinfo/Twitter-Bootstrap • Getting started: http://getbootstrap.com/getting-started/
  • 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. " http://bootstrap4xpages.openntf.org/ https://github.com/OpenNTF/Bootstrap4XPages • 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 OpenNTF.org • Also part of OpenNTF Essentials
  • 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.
    Demo • ApplicationLayout • Navigator • View • Dialog • Select2 • Responsive • Bootstrap CSS classes