Bootstrap Introduction

Bootstrap is an Open Source front end toolkit for building web application. It help us to build user interface using HTML, CSS, JavaScript. Popular among web designer and web developer because it’s flexible and easy to use.
Bootstrap(CSS Framework) is primarily about creating some reusable styles so we can extend the build on top that.

Setup: 
To start work with Bootstrap need to download files from http://getbootstrap.com/.
Inside the downloaded files you can see it’s a collection of CSS, JavaScript and Image files.
Include the files in your project on the same level i.e.Image folder should be on same level with CSS files. Then add the respective JS file reference.

Latest available Bootstrap CDN could be found at http://getbootstrap.com/getting-started/

Basic Concepts:

# Bootstrap accomplish re-usability by using Semantic Class Names.
Descriptive class names such as success, error, info.

# Compositional Classes: 
<table class=”table table-striped table-hover” />
Here the composite class table-striped & table-hover properties can also be overridden/extended. To do so we have to copy the specific bootstrap class code using chrome debugger tool, paste it into a new js file, change/ override the color/ property. Then have to add the new css file reference in application after bootstrap file load.

# Convention:  can do thing if classes are placed at right place.Like:
Creating an unordered list inside pagination div.

Result will look like a strip of numbers.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s