Learn to Create Advance Responsive Websites With Bootstrap

now we need to download bootstrap framework

visit getbootstrap.com

and click download Bootstrap button, you can see some option for download. latest version of bootstrap framework is 3.2.0.

Download Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.

Save and extract all files from zipped archive.

I have added zipped folder as supplementary material. You can download

in this video you will learn to create main index.html with necessary mark.

you will add main bootstrap CSS, JavaScript file. We also need jQuery you will see how to download and save jQuery in our project's js folder.

We are going to create a advance magazine style website with bootstrap. There will be many sections for content.

We will have several content section such as navigation, featured content, primary content area, sidebar and footer. I have created a content plan for our project.

This will help us to create each section one by one very easily. You can see complete content plan below. I have also added a downloadable PDF file.

HEADER section 1

1.1 site name + description

1.2 navigation

1.3 featured content + slider

MAIN SECTION ( Primary + sidebar content )

PRIMARY section 2

2.1 advertising

2.2 featured posts with small featured images

2.3 ads

2.4 latest news 2 columsn with big images

2.5 ads

2.6 section with media object 3 columns with medium image

2.7 single column post with heading + description

SIDEBAR section 3

3.1 Recent articles with small image + heading

3.2 Content with tabs

3.3 sidebar navigation

3.4 About us with custom CSS styling

FOOTER section 4

4.1 Full screen background color for footer

4.2 Three columns with different panel component

4.3 copyright info

In previous lecture we created content plan for our project, in this lecture you will learn how to add all content sections to our index.html file.

We will create use HTML5 header, main and footer elements with some additional classes.

There are many new elements in HTML5 and CSS3. Not all browsers supports all these new elements and properties.

Some of these new elements are

header, main, articles, aside, footer and other elements.

Media queries allows you to create responsive websites, older versions of browsers (e.g internet Explorer 8) does not support CSS3 media queries.

To add support for older browsers you need to add some additional mark up in the header section of your webpage.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->

Navigation menus are very important part of any website. bootstrap framework offers so many navigation menus with different styling.

In this lecture you will learn how to use default and inverse style navigation menus.

Bootstrap offers jumbotron element to create featured content section, where you can display your most important content.

In this lecture you will learn how to use .jumbotron element

2.7 single column post with heading + description

3.3 sidebar navigation

3.4 About us with custom CSS styling

In this lecture you will learn what is a module tab, when you can use module tabs and some example websites that use Module tabs to display different type of content.

What is a Module Tab ?

A module tab is a User Interface (UI) design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content’s corresponding tab control

Module Tabs in Web Design: Best Practices and Solutions

Smashing Magazine has a really good article about Module tabs, best practices and examples. You can read complete article at

http://www.smashingmagazine.com/2009/06/24/module-tabs-in-web-design-best-practices-and-solutions/

fr more details.

Example websites using Module Tab

In video i have shown example tabs from following websites

http://www.worldcat.org/

http://www.panic.com/coda/plugins.php#Sidebars

http://www.blueacorn.com/

https://gitter.im/

In this lecture you will learn how to use tabs module from bootstrap.

You will also learn how to use Panel classes from bootstrap and add tabs content with in panel component.

how to use panel component with different styling