Posts

Theme Design

Bootstrap Theme Designing Trick

Let’s begin the theme design. Start with the basic template code copy to basic template code into your file and save as index.html for the whole theme preview. Together with don’t make a mistake to save the index.html file to out of a bootstrap folder. Otherwise, the index.html file will not work. This is the example of the basic template code.

Design

Basic template code is available in Bootstrap’s official site (http://getbootstrap.com/getting-started/). While you copy and save your file, you can run index.html code file in your browser. “Hello, world” will appear in your browser. because of in this template Only link bootstrap.min.css, jquery.min.js and bootstrap.min.js file and HTML heading tag.

The First Step Start With The Navbar In Your Bootstrap Theme

Now go to the bootstrap site link (http://getbootstrap.com/components/) scroll down you can see right-hand sidebar navbar tab in your browser.

Theme design

Click over navbar button, and you will see there is a lot of examples of navigations copy one of code and paste hit the save button for saving your index.html file. While the index.html file is saved, refresh your browser navigation will appear you can modify it according to your requirement. It’s responsive navbar.

Bootstrap theme design

Let’s Go Ahead Make Slider

you have to go to (http://getbootstrap.com/javascript/#carousel) on this link bootstrap javascript menu and find the carousel.js. There is a lot of sliders examples copy one of carousel code and paste where a navbar tag is closed together with save it and refresh your browser while you refresh it your carousel (slider) looks a little bit messy.

bootstrap theme design

Go to your theme folder make a new folder like image folder and make few images for the slider. Images size should be (1366px by 400px) 1366px is horizon and 400px is vertical you can increase image vertical according to your requirement save images in theme image folder and give <img> tag to right path like.

Bootstrap design

Refresh browser your carousel will be run like the ocean.

Bootstrap theme design

 In next tutorial, I will tell you how to make jquery light box and footer. 
Bootstrap, Design

Bootstrap Is Frontend Site Builder

As we all know bootstrap is a CSS framework. Which can design typical applications easy & faster than another framework? Bootstrap is an open source platform. It’s Currently version 3.3.7. Developers don’t necessary to write CSS (.) class selector (#) id selector or HTML attributes even it contains comment every code of block. who is a help to understand large of the coding structure?

framework front end coding structure

Download bootstrap zip file from the bootstrap official site (http://getbootstrap.com/) Then unzip the file as you can see zip file contain three folder CSS, fonts, js.

How to familiar with bootstrap framework?.

First, step you should know how to use HTML or CSS. if you are not able to use HTML, CSS or javascript. Please take a look HTML tags, attributes or CSS properties or selector for understanding. how many ways to insert CSS and type of inserting CSS. there is three type of CSS.
1. external style sheet
2. internal style sheet
3. inline style.

  1. If you can use HTML CSS manually. bootstrap gives you stunning experience. Now go to the bootstrap official site click on getting started menu. Create an index.html file and likewise, basic template HTML code copy pastes into your index.html file.

  2. Read the CSS file briefly. Additionally have looked into bootstrap CSS menu tab instructions of a container class, media queries, grid options, example: stacked-to-horizontal or much more action available their site.

  3. Try to use row, column wrapper, offsetting columns, nesting columns, variables, and tables. while you scroll down you can get much more basic examples.

  4. Design your web application together with CSS framework. it will save your precise time and make easy as well as design a website.

  5. it contains media query for a mobile friendly application. you don’t need to put your more efforts.