Bootstrap Website template – Starting and Header

Bootstrap is one of the most important web framework for faster and easier web development. It uses HTML, CSS and Javascript as any other framework. in this post I will start a new tutorial on creating a full template using Bootstrap. the main landing page of the template is single page template with anchor menu and to make it more interactive I will use a some of javascript project and snippets.

Now let’s examine the structure of Bootstrap after downloading the compiled and minified CSS, JavaScript, and fonts from http://getbootstrap.com/getting-started/#download. Bootstrap have 3 folders (css, fonts and js). listed below all files inside these folders:

Bootstrap comes with compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). CSS source maps(bootstrap.*.map) are available for use with certain browsers’ developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.

Lets start with by adding all of these folder into new folder inside our project let’s name it “assets”.  it will be good idea to create “images” folder inside our assets folder.

let’s create our first file “index.html” and link the compiled and minified version of CSS and JS file into it. adding HTML5 shim and respond.js will be a good idea and good start point. and don’t forget to include jQuery it is required for Bootstrap actions

I will build this template as we go step by step including the most common page sections note lets have our header section. in most of website header section have the brand name and a top navigation as main items and it might have social icons or/and search bar.  after our “<body>” opening tag lets add our “<header>” and lets give it the default classes of bootstap “navebar navnar-default” I like to make to make to stick to top with scroll so I added “navbar-fixed-top”

by default “header” tag will fit the width of the browser so let’s include a container that can be wrapper for the navigation and brand name so lets add “div” inside our “<header>”