Bootstrap4XPages - an introduction

2,911 views

Published on

I presented this to the Notesnet.dk members

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,911
On SlideShare
0
From Embeds
0
Number of Embeds
1,757
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bootstrap4XPages - an introduction

  1. 1. Bootstrap4XPages Introduction Per Henrik Lausten Notesnet.dk, august 2014
  2. 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. 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. 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. 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

×