LoginSignup
0
0

More than 5 years have passed since last update.

bootstrap を指定の箇所だけ使いたい

Posted at

http://getbootstrap.com/
を「サイト全体でなく、指定のエリアだけ使いたい!」
と思うことがよくあります。

lessphpを使って
http://leafo.net/lessphp/
<div class="my_bootstrap"></div> 内でだけ適用させます。

my_bootstrap.php
<?

$base_css = 'bootstrap.css';
$dest_css = 'my_bootstrap.css';

require 'lessc.inc.php';
$less = new lessc();

$base = file_get_contents($base_css);

$out = $less->parse(".my_bootstrap {\n\n". $base . "\n\n}");

file_put_contents($dest_css, $out);

するとこんな感じのファイルが生成されます。

my_bootstrap.css

.my_bootstrap html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
.my_bootstrap body {
  margin: 0;
}
.my_bootstrap article,
.my_bootstrap aside,
.my_bootstrap details,
.my_bootstrap figcaption,
.my_bootstrap figure,
.my_bootstrap footer,
.my_bootstrap header,
.my_bootstrap hgroup,
.my_bootstrap main,
.my_bootstrap menu,
.my_bootstrap nav,
.my_bootstrap section,
.my_bootstrap summary {
  display: block;
}
.my_bootstrap audio,
.my_bootstrap canvas,
.my_bootstrap progress,
.my_bootstrap video {
  display: inline-block;
  vertical-align: baseline;
}

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0