code4copy

Bootstrap Introduction

Bootstrap is small, efficient and open source web GUI development library framework, developed @twitter. This framework is very small but really powerful to develop responsive web GUI suitable for developing page to be browsed on different devices, used by millions of web developers worldwide. It is hosted @http://getbootstrap.com/. It can be very easily customised and contains all GUI components required to create an application.
Precompiled bootstrap can be downloaded from https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip , latest version.
This zip file contains following files
bootstrap-structure

For typical use of bootstrap library we need to include bootstrap.min.css and bootstrap.min.js along with jquery . This library uses jquery plug-in as base.

Bootstrap.theme.css is optional file, it is separated in latest version so that one can easily modify theme of website.

I am going to use this in my first bootstrap project with Spring 3.0 using STS.

In my project I copied bootstrap.zip all extracted contents and modified my index.html page as given below.

<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 1st example</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.theme.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap\'s JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

And browse this page in browser

bootstrap-1-exaqmple

Anupama