![Page 1: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/1.jpg)
Twitter Bootstrap theme
For Application Express 4.2.2
![Page 2: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/2.jpg)
2
A presentation by
![Page 3: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/3.jpg)
Who is smart4apex?
• Just some geeks passionate
about Apex, having fun
together
• Sharing experience and
knowledge
• Explore new techniques and
opportunities
• Build state of the art (Apex)
solutions for our customers
3
![Page 4: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/4.jpg)
Sergei Martens
• Oracle since 1998 (Oracle 7)
• Started as classic developer (Forms & Designer), now Apex
• Special interest in UI
• Speaker Dutch Apex congress 2012 (Ext JS), 2013 (mobile) & 2014 (Bootstrap)4
Who are we?
Richard Martens
• Oracle since 2002 (Oracle 8i)
• PL/SQL, Apex, HTML5, CSS3, JavaScript, XML, XSLT
• Special interest in UI
• RIMA on Oracle Forums
![Page 5: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/5.jpg)
The best user-interface• Is intuitive to the user (no manual needed)• Looks trendy (nobody wants to use old/odd looking
software anymore)
User-interfaces are getting important to an increasing extent.
5
![Page 6: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/6.jpg)
• Bootstrap• Simple design• Just a few items• Large items• Dynamic regions• Info graphics• Dashboards• Long pages• Flat design
• JQuery UI (JQuery mobile)
• Complex design• Many items• Small items• Tabs / Report -> Detail• Text• Reports / tables• Short pages• Skeuomorphic (realism)
Trends
6
![Page 7: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/7.jpg)
Our dashboards
7
Today
Tomorrow
![Page 8: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/8.jpg)
What is bootstrap?
• a free collection of tools for creating websites and web applications.
• the most popular framework on the internet.
• supports responsive design.
• thousands of plug-ins available.
• it is easy to adjust to corporate brand.
• a frequent release schedule.
• based on JQuery
8
![Page 9: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/9.jpg)
• Theme CSS • Theme javascript
-remember active tab-close modal
• Templates -page -region -label -etc…
• Apex plug-ins-Modal iframe (da)-Calendar (item)
• Other (integrated) plug-ins
-Fontawesome-Parsley (JQuery)-Cookie (JQuery)-Bootstrap Notification -Bootstrap selectlist-Bootstrap date-picker
9
What was included in old version2?
![Page 10: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/10.jpg)
10
New in version 3
Technical upgradesBootstrap 3.1.1 => 3.2.0Font Awesome 4.0.3 => 4.2.0JQuery 1.7.1 => 1.11.1
Apex plug-insFlot chartsMorris chartsHierarchical list
UXDashboard (SB-Admin 2)Many new UI typesFully responsive!
![Page 11: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/11.jpg)
Demo
11
![Page 12: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/12.jpg)
Bootstrap responsive - grid
• 12 column layout• 940px width• Works with CSS-classes:
- .row; like <tr> in html-table- .col-md-#; width of the column- .col-md-offset-#; move # columns to the right- .container-fluid; percentages in stead of fixed width- .container; center on page
12
![Page 13: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/13.jpg)
Offsetting columns
13
Move columns to the right using .col-md-offset-*. These increase the left margin of a column by * columns.
.col-md-4 .col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3 col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
![Page 14: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/14.jpg)
Bootstrap vs. Apex
Problem:Bootstrap : relative positioningApex: absolute positioning
Solution:col-xx-offset-# in column attributes
14
![Page 15: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/15.jpg)
Were to get the theme?
15
http://www.apex-bootstrap.com
![Page 16: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/16.jpg)
Support
16
Email: [email protected]
The software is released “as is” and there is no official support for the Bootstrap theme for Apex.
By sending an email we will try to answer your question in the best way we can. But only in a time that’s in our own convenience.
![Page 17: Odtug webinar 2014 version 3 of bootstrap theme 4 apex](https://reader034.vdocuments.us/reader034/viewer/2022052315/54820e78b47959e70c8b46e0/html5/thumbnails/17.jpg)
17
Do you want to participate in development?
We are fishing for IT professionals with a hunger for knowledge