twitter bootstrap - Integrate css framework work only in specified class or id -


my problem project integration website. example have website build 0 , specified system build on boostrap or foundation. when try integrate on website, website start using boostrap or foundation style. posible make work css in example

<div id="boostrap_only">     <table class="table table-bordered">...</table> <!-- here works --> </div>  <table class="table table-bordered">...</table> <!-- here don't work --> 

there many ways .

1- using less ( in less file include bootstrap )

.bootstrap {     @import "/path-to-bootstrap-less.less"     @import "/path-to-bootstrap-responsive-less.less" } 

2- detailed solution :

the final fix use sass (recommended off-site), allows nest elements , automatically produce final css. step step process is:

  1. concatenate 2 bootstrap files (bootstrap.css , bootstrap-responsive.css) bootstrap-all.css.
  2. create new sass file, bootstrap-all.scss, content div.bootstrap {.
  3. append bootstrap-all.css bootstrap-all.scss.
  4. close div.bootstrap selector appending } bootstrap-all.scss.
  5. run sass on bootstrap-all.scss produce final css file.
  6. run yui compressor on final file produce minimised version.
  7. add minimised version head element , wrap want styles apply in <div class="bootstrap"></div>.

for reference see links link 1


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -