Simplex Design blog : Bootstrap 101: Website interface supermarket and shopping web elements |  |
| Bootstrap 101: Website interface supermarket and shopping web elements Posted: 24 Jul 2013 02:14 AM PDT  Nowaday, building a site interface is not difficult. We had javascript frameworks which help to save more time in writing script, now we have front -end framework which is like a supermarket, you take items from the list and add to your site. For example, how you add a navigation bar to your site before ? First, you have to add HTML markup, and then you have to write CSS to make this nav bar looks like what you want, and the last step is to writing script if needed. Is that right ? But what happen if now you need to do the first step only, I mean adding HTML markup. The script and CSS already is in the framework itself, you don't need to write CSS and javascript anymore. Is this faster? 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. The most popular front-end framework is Bootstrap. Bootstrap's files contain Grid layout, icons, javascripts... every element you need to build a site's interface. Bootstrap's grid layout also supports responsive feature, works well in all mobile devices. 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.html2, 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"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>These two lines are complete CSS and javascript file for Bootstrap framework. 3, Bootstrap has 4 sections that cover all things in a website's interface. They are:
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 <ul class="nav">Save template, and see the result. No need to write javascript, no need to write CSS, no need jquery plugins any more. 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. 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: <div><i class="icon-home"></i><a href="#">Home</a></div>No need to host your icon. Save more time and bandwidth, especially for a platform like Blogger. We don't need to worry about host for javascript, host for images and get headache whenever these hosts down. That's all for Bootstrap installation. In next post, I will show you what I did to integrate Bootstrap to SimplexDesign for responsive feature. |
| You are subscribed to email updates from SimplexDesign - free premium blogspot template To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
ليست هناك تعليقات:
إرسال تعليق