Download - Bootstrap with liferay
![Page 1: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/1.jpg)
CIGNEX Datamatics Confidential www.cignex.com
Bootstrap with LiferayVer : 1.0
Name: Sendhil Kumar K Title: Bootstrap with Liferay
![Page 2: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/2.jpg)
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
![Page 3: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/3.jpg)
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?
![Page 4: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/4.jpg)
CIGNEX Datamatics Confidential www.cignex.com
Summary
4
Overview of Bootstrap 3 and 2.3.2
Bootstrap 3 Bootstrap 2.3.2
Grids: FluidUI Tools: Lots of widgets; good for rapid prototyping
Grids: Fluid and FixedUI 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
![Page 5: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/5.jpg)
CIGNEX Datamatics Confidential www.cignex.com5
Overview of Bootstrap 2.3.2 and 3Grids and Responsiveness
Bootstrap 3 Bootstrap 2.3.2
Base widthFluid (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
![Page 6: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/6.jpg)
CIGNEX Datamatics Confidential www.cignex.com6
Overview of Bootstrap 2.3.2 and 3Grids and Responsiveness
Bootstrap 3 Bootstrap 2.3.2
Container syntax
<div class="container"> <div class="container">
or
<div class="container-fluid">
Row syntax
<div class="row">
<div class="col-xs-2 col-sm-8 col-md-6 col-lg-5">...</div>
<div class="col-xs-10 col-sm-4 col-md-6 col-lg-7">...</div>
</div>
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
![Page 7: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/7.jpg)
CIGNEX Datamatics Confidential www.cignex.com
Major class changesBootstrap 2.x Bootstrap 3.0• .row-fluid .row• .span* .col-md-*• .offset* .col-md-offset-*• .brand .navbar-brand• .nav-collapse .navbar-collapse• .nav-toggle .navbar-toggle• .btn-navbar .navbar-btn• .hero-unit .jumbotron• .icon-* .glyphicon .glyphicon-*• .btn .btn .btn-default• .btn-mini .btn-xs• .btn-small .btn-sm• .btn-large .btn-lg• .alert-error .alert-danger• .visible-phone .visible-xs• .visible-tablet .visible-sm• .visible-desktop Split into .visible-md .visible-lg• .hidden-phone .hidden-xs• .hidden-tablet .hidden-sm• .hidden-desktop Split into .hidden-md .hidden-lg
Bootstrap 2.x Bootstrap 3.0• .input-block-level .form-control• .control-group .form-group• .checkbox.inline .radio.inline .checkbox-inline .radio-inline• .input-prepend .input-append .input-group• .add-on .input-group-addon• .img-polaroid .img-thumbnail• ul.unstyled .list-unstyled• ul.inline .list-inline• .muted .text-muted• .label .label .label-default• .label-important .label-danger• .text-error .text-danger• .table .error .table .danger• .bar .progress-bar• .bar-* .progress-bar-*• .accordion .panel-group• .accordion-group .panel .panel-default• .accordion-heading .panel-heading• .accordion-body .panel-collapse• .accordion-inner .panel-body
![Page 8: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/8.jpg)
CIGNEX Datamatics Confidential www.cignex.com
What's newElement DescriptionPanels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapseList groups .list-group .list-group-item .list-group-item-text .list-group-item-headingResponsive utility classes (≥1200px) .visible-lg .hidden-lgOffsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*Contextual table rows .success .danger .warning .active .infoContextual panels .panel-success .panel-danger .panel-warning .panel-infoInput height sizes .input-sm .input-lgInput groups .input-group .input-group-addon .input-group-btnForm controls .form-control .form-groupButton group sizes .btn-group-xs .btn-group-sm .btn-group-lgGlyphicons .glyphiconJumbotron .jumbotronExtra small grid (<768px) .col-xs-*Small grid (≥768px) .col-sm-*Medium grid (≥992px) .col-md-*Large grid (≥1200px) .col-lg-*Navbar text .navbar-textNavbar header .navbar-headerJustified tabs / pills .nav-justified
-------------------------------------------------------------Element DescriptionResponsive images .img-responsivePush .col-sm-push-* .col-md-push-* .col-lg-push-*Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*Modal .modal-dialog .modal-contentThumbnail image .img-thumbnailWell sizes .well-sm .well-lgAlert links .alert-link
││││
![Page 9: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/9.jpg)
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-levelNo 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...
![Page 10: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/10.jpg)
CIGNEX Datamatics Confidential www.cignex.com
What's removedElement 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-headerNo direct equivalent, but list groups and .panel-groups are similar.
Inline help for form controls .help-inlineNo exact equivalent, but .help-block is similar.
![Page 11: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/11.jpg)
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...
![Page 12: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/12.jpg)
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.
![Page 13: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/13.jpg)
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
![Page 14: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/14.jpg)
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
![Page 15: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/15.jpg)
CIGNEX Datamatics Confidential www.cignex.com15
Working with Liferay 6.2 and Bootstrap 2.3.2
Basic Structure: [Two Column Layout]<div id="main-content" role="main"><div class="portlet-layout row-fluid"> <div class="span6 portlet-column portlet-column-first" id="column-1"> $processor.processColumn("column-1", "portlet-column-content portlet-column-
content-first") </div> <div class="span6 portlet-column portlet-column-last" id="column-2"> $processor.processColumn("column-2", "portlet-column-content portlet-column-
content-last") </div> </div></div>
![Page 16: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/16.jpg)
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 - cssStep 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.
![Page 17: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/17.jpg)
CIGNEX Datamatics Confidential www.cignex.com17
Working with Liferay 6.2 and Bootstrap 3.xBasic Structure: [Two Column Layout]<div id="main-content" role="main" style="margin-top: 79px;">
<div class="row"><div class="col col-md-12" id="column-1" style="border:1px solid pink;"><br><br>
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only") </div> </div> <div class="row"> <div class="col col-md-6" id="column-2" style="border:1px solid red;"><br><br> $processor.processColumn("column-2", "portlet-column-content portlet-column-content-first") </div> <div class="col col-md-6" id="column-3" style="border:1px solid red;"><br><br> $processor.processColumn("column-3", "portlet-column-content portlet-column-content-last") </div> </div></div>
![Page 18: Bootstrap with liferay](https://reader034.vdocuments.us/reader034/viewer/2022050614/5886014e1a28ab0a3f8b5903/html5/thumbnails/18.jpg)
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: