Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Bootstrap4XPages - an introduction

3.747 Aufrufe

Veröffentlicht am

I presented this to the Notesnet.dk members

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×