Tutorial How to use Twitters Bootstrap!

Immortal · 10-01-2012, 01:34 AM

Well hello their, My name is Immortal and as this will be my first post I am going to make it count Biggrin

You may be asking what is twitters bootstrap and why would I want to use it?

Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development.

Pro's and Cons

Pros:
- Easy to use
- Pre coded css
- Pre coded jquery
- Very well documented
- Tablet/ mobile support
- For all browsers!

Cons:
- so far none.

well, you might be asking what do I need to use this?

you're going to need a web server, ftp client, a text editor, and last but not lest bootstrap

Download the bootstrap here: http://twitter.github.com/bootstrap/index.html

Document page about the bootstrap: http://twitter.github.com/bootstrap/scaffolding.html

For these examples I used Notepad++

First extract, the file and then Upload the bootstrap to your webserver using a ftp client not that hard...

So your root should look like {root dir}/bootstrap

and you should see a css folder and a js folder, in the bootstrap directory

soo, now lets move on and start writing somecode

so go to your root directory and write this html template,

[Image: e7056d74d2b7478f9ff2123.png]

here is the code for you lame asses,

Code:
<!-- Immortal @ Anarchy Forums -->

    <!DOCTYPE html>
    <html>
	
    <head>
    <title>Example Code</title>
    <!-- Loading the bootstrap css file -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    </head>
	
    <body>
	
    <h1>Hello, world!</h1>
	<!-- Loading jquery -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
	<!--  Loading the bootstrap javascript file -->
    <script src="/bootstrap/js/bootstrap.min.js"></script>
	
	
    </body>
	
    </html>

Soo now we are going to use, navbar to give us a sexy link tablet.

[Image: 9d520dfa099f4047bb42f97.png]

Code:
<!-- Immortal @ Anarchy Forums -->
    <!DOCTYPE html>
    <html>
    <head>
    <title>Example Code</title>
    <!-- Loading the bootstrap css file -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    </head>
	
    <body>
	    <div class="navbar">
			<div class="navbar-inner">
			<a class="brand" href="#">Welcome Home</a>
				<ul class="nav">
					<li class="active"><a href="#">Page 1</a></li>
					<li><a href="#">Page 2</a></li>
					<li><a href="#">Page 3</a></li>
				</ul>
			</div>
		</div>
	<!-- Loading jquery -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
	<!--  Loading the bootstrap javascript file -->
    <script src="/bootstrap/js/bootstrap.min.js"></script>
	
    </body>
    </html>

here is, what the site looks like.

[Image: 86db50116b00440ab2f99c9.png]