
Why BootStrap?
The interesting thing about bootstrap is that it helps you to get started as quickly as possible with cool looking UIs that can be created out-of-box HTML/CSS code snippets. As a matter of fact of fact, I landed up with Bootstrap after I was searching for some rapid Java UI builder for Eclipse using which I could easily build fancy UIs while focusing on server side coding. This is where Bootstrap fit the bill. Following are other key Eclipse plugins evaluated:
- GWT
- WindowBuilder Pro
Steps to Get Started with Bootstrap & Eclipse
- Download Bootstrap from http://getbootstrap.com/
- Create a dynamic web project in eclipse. Make sure that this dynamic web project could be run on the server.
- Under WebContent folder, create a bootstrap folder.
- Import files such as following from downloaded Bootstrap resources into the newly created folder, “bootstrap” in step 3.
- css folder consisting of bootstrap.min.css
- js consisting of bootstrap.min.js
- img consisting of images
- Create an index.jsp and put following within <head> tag
<link href=”bootstrap/css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”bootstrap/js/bootstrap.min.js”></script> - Take a simplistic code snippet such as following from Bootstrap website (http://getbootstrap.com/css/#forms ) and paste it within <body> tag.
<div class=”container”>
<form role=”form”>
<div class=”form-group”>
<label for=”exampleInputEmail1″>Email address</label>
<input type=”email” class=”form-control” id=”exampleInputEmail1″ placeholder=”Enter email”>
</div>
<div class=”form-group”>
<label for=”exampleInputPassword1″>Password</label>
<input type=”password” class=”form-control” id=”exampleInputPassword1″ placeholder=”Password”>
</div>
<div class=”form-group”>
<label for=”exampleInputFile”>File input</label>
<input type=”file” id=”exampleInputFile”>
<p class=”help-block”>Example block-level help text here.</p>
</div>
<div class=”checkbox”>
<label>
<input type=”checkbox”> Check me out
</label>
</div>
<button type=”submit” class=”btn btn-default”>Submit</button>
</form>
</div> - Check the changes on the server.
- Data Analysis Types: Concepts & Examples - December 30, 2022
- Procurement Advanced Analytics Use Cases - December 29, 2022
- Data Catalog Concepts, Tools & Examples - December 28, 2022
Its very helpful to me…TY so much 🙂