Yes, it give you less option and flexible, but it easier for beginner when start building a site, if you want, you can still add CSS code to overwrite existing CSS of front-end framework.
In this post series, I will show you install instruction of Bootstrap and the way I did to integrate bootrap to SimplexDesign blog for responsive design.
How to use Bootstrap1, The first, you need to take a look on Bootstrap website: http://twitter.github.io/bootstrap/index.html
2, To add Bootstrap framework to your site, you don't need to download and host it your self. There's a host already for this frameworks at http://www.bootstrapcdn.com . Just add this code to the header of your template file, before </head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
3, Bootstrap has 4 sections that cover all things in a website's interface. They are:
- Layout: bootstrap support grid layout, fixed width and fluid width (calculating in percentage), and responsive layout (layout which can change depend on device displaying)
- Base CSS: Include CSS for typography, code, table, form...
- Components: Include script of all components for a website interface: dropdown menu, navbar, buttons ...
Now, if you want to add a navigation bar to your site, just need to do as bellow:
a, Add the Bootstrap framework to your template file as step 2.
b, In template file, choose the place where you want to add navigation bar, and then add the HTML markup bellow
c, if you want page navigation:
Just need to add this HTML mark up
<ul class="pager">Save template and check the result. You will see a page navigation.
<a href="#">← Older</a>
<a href="#">Newer →</a>
d, Adding icon is easier than before. If you want to add home icon and Home link to your site, here is something you must write in the past:
<div><img src="icon home src"/> <a href="#">Home</a></div>But this is what we need with bootstrap:
That's all for Bootstrap installation. In next post, I will show you what I did to integrate Bootstrap to SimplexDesign for responsive feature.