BOOTSTRAP has multiple advantages:
- Easier to implement
- More responsive UI
- Mobile compatible UI
- Open source
- HTML syntax
- And the list goes on
Now let's learn how to include BOOTSTRAP framework in VF pages, which will help us to design a responsive UI in Salesforce.
Few things to know before we proceed to VF coding:
- BOOTSTRAP and jQuery Library must be included in page
- All the BOOTSTRAP codes should be written inside Container-Fluid or Container class
- It is always advisible to include META tags within the Bootstrap page for encoding, width scale and IE compatibility.
- All the Bootstrap flavour on the page comes with the Class property of HTML elements, we just need to write the class value of the component and it will work as expected.
- Remembering Bootstrap is also very easy, because the component names are exactly same what they do. For ex: row creates a row, col creates a column, panel creates a panel etc..
Few properties which is very common and we will be using it in the example:
- DIV: This will be used mostly to design the page, with different types of classes attached to it.
- ROW: This creates a row in the page for parent element or divides the page in rows
- COL-XX-YY: This creates the column for the row or divides the parent element area in columns. XX is the screen size of the machine and the possible values would be LG(Large), MD(Medium), SM(Small), XS(Extra Small). YY is the column size according to the page or parent element area, max size would be 12 and minimum could be 1. So the complete page can be divided into 12 parts.
- PANEL: This creates a Panel in the page, which can further contain Header, Body and Footer.
- BTN: This crates the button in the page.
Few styling of Bootstrap element, we can use few predefined attribute along with the class name:
- DEFAULT(Grey color)
- PRIMARY(Blue color)
- SUCCESS(Green color)
- INFO(Light Blue color)
- WARNING(Orange color)
- DANGER(Red color)
Above styling properties is always used with some class name, like panel-default, btw-primary etc..
Below is a very basic VF page of a login screen, but it will give you an idea how to go ahead with BOOTSTRAP.
VF Page:
<!--In below apex:page tag, I have disabled all the CSS property so that we get on boostrap flavour in our page. And also I have used a custom controller for the page-->
<html>
<head>
<title>AK Computing</title>
<!-- below is for character encoding -->
<meta charset="utf-8" />
<!-- below is to make the page IE compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- below is make the page responsive according to the screen size -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- These three libraries are the pre-requisite for Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.blackBackground{
background-color: #000000 !important;
}
.commandButton{
background-color: #337ab7 !important;
border-color: #2e6da4 !important;
color:#EEEEEE;
width:100% !important:
}
.inputTxt{
width:35%;
margin-bottom:2%;
}
.mainPanel{
min-height:200px;
margin-left:30%;
margin-right:30%;
margin-top:20%;
margin-bottom:20%;
}
</style>
<script></script>
</head>
<body class="blackBackground">
<apex:Form >
<!--below tag contains all the bootstrap -->
<div class="container-fluid">
<!--below creates a panel of type default, but here I have customised it with css -->
<div class="panel panel-default mainPanel">
<div class="panel-body">
<!-- row divides the pages or parent element area into rows, here i have divided Panel into three parts -->
<div class="row">
</div>
<div class="row">
<!-- col creates the column, here it will take the complete width as I have mentioned 12 in the size -->
<div class="col-xs-12">
<center>
<div class="row">
<apex:inputText value="{!userName}" id="userNameInput"
html-placeholder="Username" styleClass="inputTxt"/>
</div>
<div class="row">
<apex:inputSecret value="{!password}" id="passwordInput"
html-placeholder="Password" styleClass="inputTxt" />
</div>
<div class="row">
<apex:outputPanel rendered="{!error}">
<apex:outputText ><Font color="red">{!errorMessage}</font></apex:outputText>
</apex:outputPanel>
</div>
<div class="row">
<apex:commandButton action="{!login}" id="commandBtn" styleClass="commandButton"
style="width:35%;" value="{!$Label.site.login_button}" />
</div>
<div class="row">
</div>
<div class="row">
<apex:outputLink value="{!$Page.CustomForgotPassword}"> {!$Label.site.forgot_your_password_q}
</apex:outputLink>
</div>
</center>
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</apex:Form>
</body>
</html>
</apex:page>
There is quite a long list of Bootstrap predefined classes which makes life easier for the designer, I hope this will give you a hint how to start with Bootstrap.
No comments:
Post a Comment