Call Girls Service Adil Nagar 7001305949 Need escorts Service Pooja Vip
Bootstrap with liferay
1. CIGNEX Datamatics Confidential www.cignex.com
Bootstrap with Liferay
Ver : 1.0
Name: Sendhil Kumar K
Title: Bootstrap with Liferay
2. CIGNEX Datamatics Confidential www.cignex.com
• With the release of Liferay 6.2, Bootstrap version 2.3.2
has been added as default theme library.
2
Introduction of Bootstrap in Liferay
3. CIGNEX Datamatics Confidential www.cignex.com
• Bootstrap 3 was released on August 19th, 2013, roughly a month and a half
before Liferay planning on releasing 6.3. Trying to cram it in at the last
minute would have led to nothing but major bugs, weeping, gnashing of
teeth, etc.
• Bootstrap 3 completely dropped support for IE7 and below. While Liferay
6.2 provided limited support for IE7 and below, it's just not feasible yet for
this version to completely drop support for everyone across the board.
3
Why did Liferay choose version 2.3.2 instead of 3?
4. CIGNEX Datamatics Confidential www.cignex.com
Summary
4
Overview of Bootstrap 3 and 2.3.2
Bootstrap 3 Bootstrap 2.3.2
Grids: Fluid
UI Tools: Lots of widgets; good
for rapid prototyping
Grids: Fluid and Fixed
UI Tools: Lots of widgets; good for rapid
prototyping
CSS
Bootstrap 3 Bootstrap 2.3.2
Reset Normalize.css Normalize.css
LESS Yes Yes
Sass/Scss Yes No
5. CIGNEX Datamatics Confidential www.cignex.com5
Overview of Bootstrap 2.3.2 and 3
Grids and Responsiveness
Bootstrap 3 Bootstrap 2.3.2
Base width
Fluid (480px, 768px, 992px,
1200px)
Fluid and fixed (724px, 940px, 1170px;
below 768px are single column and
vertically stacked)
Columns 12 12
Single
column
class syntax
.col-xs-1, .col-sm-1
.col-md-1, .col-lg-1
.span1
Two column
class syntax
.col-xs-2, .col-sm-2
.col-md-2, .col-lg-2
.span2
8. CIGNEX Datamatics Confidential www.cignex.com
What's new
Element Description
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups .list-group .list-group-item .list-group-item-text .list-group-item-heading
Responsive utility classes (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Contextual table rows .success .danger .warning .active .info
Contextual panels .panel-success .panel-danger .panel-warning .panel-info
Input height sizes .input-sm .input-lg
Input groups .input-group .input-group-addon .input-group-btn
Form controls .form-control .form-group
Button group sizes .btn-group-xs .btn-group-sm .btn-group-lg
Glyphicons .glyphicon
Jumbotron .jumbotron
Extra small grid (<768px) .col-xs-*
Small grid (≥768px) .col-sm-*
Medium grid (≥992px) .col-md-*
Large grid (≥1200px) .col-lg-*
Navbar text .navbar-text
Navbar header .navbar-header
Justified tabs / pills .nav-justified
-------------------------------------------------------------
Element Description
Responsive images .img-responsive
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Modal .modal-dialog .modal-content
Thumbnail image .img-thumbnail
Well sizes .well-sm .well-lg
Alert links .alert-link
│
│
│
│
9. CIGNEX Datamatics Confidential www.cignex.com
What's removed...
Element Removed from 2.x 3.0 Equivalent
Form actions .form-actions N/A
Search form .form-search N/A
Form group with info .control-group.info N/A
Fixed-width input sizes
.input-mini .input-small .input-medium .input-large .input-
xlarge .input-xxlarge
Use .form-control and the grid system
instead.
Block level form input .input-block-level
No direct equivalent, but forms controls
are similar.
Inverse buttons .btn-inverse N/A
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
continue...
10. CIGNEX Datamatics Confidential www.cignex.com
What's removed
Element Removed from 2.x 3.0 Equivalent
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A
Pill-based tabbable area .pill-content .tab-content
Pill-based tabbable area pane .pill-pane .tab-pane
Nav lists .nav-list .nav-header
No direct equivalent, but list groups
and .panel-groups are similar.
Inline help for form controls .help-inline
No exact equivalent, but .help-block is
similar.
11. CIGNEX Datamatics Confidential www.cignex.com
Additional notes
• By default, text-based form controls now receive only minimal styling. For focus colors and rounded
corners, apply the .form-control class on the element to style.
• Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap
inputs inside <div class="col-*"></div> to control input widths.
• .badge no longer has contextual (-success,-primary,etc..) classes.
• .btn must also use .btn-default to get the "default" button.
• .row is now fluid.
• Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
• The icons, now .glyphicon, are now font based. Icons also require a base and icon class (e.g.
.glyphicon .glyphicon-asterisk).
continue...
12. CIGNEX Datamatics Confidential www.cignex.com
Additional notes
• Typeahead has been dropped, in favor of using Twitter Typeahead.
• Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer
sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and
behavior. Also, you should no longer apply .hide to .modal in your markup.
• As of v3.1.0, the HTML loaded by the remote modal option is now injected into the .modal-content
(from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily
vary the header and footer of the modal, not just the modal body.
• JavaScript events are namespaced. For example, to handle the modal "show" event, use
'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc.
13. CIGNEX Datamatics Confidential www.cignex.com
Step 1: In Liferay Devloper Studio, Go to --> File - New - Liferay Plugin Project.
Step 2: Provide the Name inside Project Name Text Box (say Test).
Step 3: Select the Plugin Type as - Theme and click Next.
Step 4: Select Theme parent - _styled and Theme framework - Velocity. Click Finish.
Step 5: A new Theme (Test-theme) will be created.
Step 6: Inside _diffs folder create css, images, js and templates folder.
Step 7: Copy and paste the required files in the corresponding folders as needed.
Step 8: Modify the files as explained.
13
Working with Liferay 6.2 and Bootstrap 2.3.2
Creating Theme
14. CIGNEX Datamatics Confidential www.cignex.com
Step 1: In Liferay Devloper Studio, Go to --> File - New - Liferay Plugin Project.
Step 2: Provide the Name inside Project Name Text Box (say Test).
Step 3: Select the Plugin Type as - Layout Template and click Finish.
Step 4: A new Layout (Test-layouttpl) will be created.
Step 5: Open Test.tpl file and create layout from Palete in Visual Tab/paste Code in Source
Tab.
Step 6: Replace the "aui" classes to "span" classes present in Bootstrap 2.3.2.
14
Working with Liferay 6.2 and Bootstrap 2.3.2
Creating Layout
16. CIGNEX Datamatics Confidential www.cignex.com
Step 1: In Liferay Devloper Studio, Go to --> File - New - Liferay Plugin Project.
Step 2: Provide the Name inside Project Name Text Box (say Test).
Step 3: Select the Plugin Type as - Theme and click Next.
Step 4: Select Theme parent - _styled and Theme framework - Velocity. Click Finish.
Step 5: A new Theme (Test-theme) will be created.
Step 6: Inside _diffs folder create css, images, js and templates folder.
Step 7: Copy and paste the required files in the corresponding folders as needed.
Step 7 a: Download Bootstrap 3 CSS file and place it inside _diffs - css
Step 7 b: Open Main.css and call the Bootstrap 3 css file above custom.css
Step 8: Modify the files as explained.
16
Working with Liferay 6.2 and Bootstrap 3
Creating Theme
All the basic steps for creating Theme by including Bootstrap 3 are same except few
additional Steps.
18. CIGNEX Datamatics Confidential www.cignex.com
Conflict class fixes - Liferay 6.2 with Boostrap 3
.signed-in .collapse { display:block; }
.lfr-edit-layout-panel .collapse{ display:block; }
.dockbar.navbar-static-top .collapse { display: block; }
.navbar-inner .collapse{ display:block; }
.dockbar-ready #wrapper { margin-top: 149px; }
.dockbar-ready section#content { padding: 0 0 0 0; }
It seems to work fine, though there are often issues for anything that we use in the
control panel as it is its own theme altogether. For example, the "+Add" "preview"
"Edit" for a piece of content doesn't look right unless we do some CSS magic to
override the BS3 styles with new settings.
.dockbar.navbar-static-top {
background-color: transparent;
padding: 0px;
}
.dockbar-messages{ display:none;}
.lfr-device-preview{ z-index: 1000; }
.modal{ display:block;}
.modal-hidden{ display:none; }
class to override: