For simplicity you don’t need to have any web server to start web page development. After you have gained experience, learned how to develop web pages using different technologies, you can start publish your content on web page and start professional web development.

To start with Bootstrap download it from http://getbootstrap.com/getting-started/#download.

Create a new directory for the project, for example C:\Development\Learn\Bootstrap\

Create subfolder css and copy to it files bootstrap.css and bootstrap-theme.css from Bootstrap archive bootstrap-3.3.6-dist\css\

Create an index.html file in the main project directory. Open it with a text editor for example Notepad++ and copy to the text:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CarRentSystem web application</title>
	<meta charset="utf-8">
</head>
<body>
    <h1>Car Rent System web application</h1>
    <div>
        <div>
            Simple panel
        </div>
    </div>
</body>

 

Open your index.html file in web browser and you will see your result:

 

You see a simple web page done with plain HTML.

Bootstrap simple panel

Let's modify it and add links to bootstrap css files and some simple formating on <div> elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CarRentSystem web application</title>
	<meta charset="utf-8">
    <link href="/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
    <h1>Car Rent System web application</h1>
    <div class="panel panel-default">
        <div class="panel-body">
            Simple panel
        </div>
    </div>
</body>

Refresh index.html file in web browser and you will see your result:

 As you see your panel has a simple border and some padding to panel content.

 

Comments powered by CComment