Bootstrap: New Net-volution

 

A lot of companies developed their own mature front-end components or frameworks since several years ago, while only twitter makes it popular all around the world. Just think of it why. I don’t believeBootstrap implies too much complex technologies, but it contains great ideas of layout and encapsulation, with low learning curve and one of the best documents in the world for newbies.

I recommend everyone who is interested in front-end tech can have a glance at Bootstrap at least. Of course you needn’t to dive into each detail of it, but to build sense of front-end development and modularization. This is the very example to show how to write html, css and javascript code.

I can’t recall the first time I saw the input box with a twinkling blue border, or the unicolored buttons with a triangle on the right side… But now the whole internet has been fully filled with the style. It seems Bootstrap will be the standard to web development in the near future, just as JQuery to javascript, WordPress to blog (OMG, WordPress has been integrated with Bootstrap as well… all right, I feel a little tired of it now).

Bootstrap may make inferior UI designers lose their job. The programmers who don’t have good aesthetic sense can make well-formed page now. So, please be smart and take it’s sides. You can get some websites built by Bootstrap here.

Jetstrap is an awesome WYSIWYG tool to customize Bootstrap:

http://v.youku.com/v_show/id_XNDU0ODM5OTQw.html

Sometimes you have to face some issues or limiations when you use a unified framwork or style collection such as Bootstrap. One of them is called “css polution”, which is caused by a natural defect of css.

Once a component (such as table or a division) is generated, it will be affected by Bootstrap styles, even if the affection is not exactly what you want. Unfortunatly, you may have no idea to avoid it graciously, but some work around is as below:

1. Find out all the incorrect css styles affected to the component affected, and correct them one by one. This is something like “ugly hack”, which means once you change the bootstrap css, you will never know what will happen to the the component.
2. Write an “iframe” tag to hold the component. The tag can be written on the document dynamically by javascript. Iframe will protect it from any other css styles defined on the parent page. However, it’ll bring complexity when you use javascript to manipulate the DOMs from outside of the iframe for it’s a kind of cross-domain operation.

Or, remove bootstrap from the page. Then you have to deal with all the css styles by yourself. Calm down and don’t worry, it won’t kill you.

文章系本人原创，转载请注明作者和出处（http://www.raychase.net）

注：本博客已经迁移到个人站点 http://www.raychase.net/ ，欢迎大家访问收藏，本ITEye博客在数日后将不再更新。