[salesforce][Bootstrap]利用する際の注意点
最近Flightのリリースなどフロント側のフレームワークに力を入れているTwitterですが、force.comでもちょっとしたデザインを組み込む際にBootstrap使いたかったので試してみました。
通常Bootstrapではbodyタグの最後にScriptの読み込むを行うことが推奨されていますが、Visualforceで利用する際はapex:pageタグの直前に記載します。
[html]
<apex:page controller="sample_bootstrap" standardStylesheets="true" showHeader="true" sidebar="false">
<apex:stylesheet value="{!URLFOR($Resource.static, ‘css/bootstrap.min.css’)}"/>
<apex:includeScript value="{!URLFOR($Resource.static, ‘js/jquery-1.8.2.js’)}"/>
<style type="text/css">
/* せっかくなのでサンプルに色をつけてみた */
.show-grid div{
background-color:#aaccff;
text-align:center;
}
.show-grid {
margin-top: 10px;
margin-bottom: 20px;
}
</style>
<!– グリッドを表示 –>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<script src="{!URLFOR($Resource.static, ‘js/bootstrap.min.js’)}"></script>
</apex:page>
[/html]
で、実際にページを表示するとこんな感じ
あり？ヘッダー画像が消えてる。あと検索窓に枠がついてしまってる。。
どうやらbootstrapのcssファイル内でimgタグ、input[type=”text”]関連にスタイルが指定されているため上記画面のようになってしまいます。
BootstrapはApacheライセンスでコメント残せば修正はOKです。
なのでbootstrap.cssの以下部分をコメントアウト
・70行目周辺
[html]
/*
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
*/
[/html]
・1060行目周辺
[html]
select,
textarea,
/* input[type="text"], */
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: 20px;
padding: 4px 6px;
margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
color: #555555;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
[/html]
・1100行目周辺
[html]
textarea,
/* input[type="text"], */
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
[/html]
・1127行目周辺
[html]
textarea:focus,
/* input[type="text"]:focus, */
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
[/html]
上記コメントアウトした結果が下記となります
ヘッダー画像、グローバル検索も通常通り表示されました。
ページ内でimgタグ、input[type=”text”]を利用する場合は別途Bootstrapのスタイルを指定する事で対応できそうです。
ただ上記以外にも落とし穴はありそうな気がするので実際に利用する際には注意が必要そうです。