私的見解

paddingの問題

カスタム用のスタイルシートを bootstrap-custom.css として少し変更しているので違いが有りますが、下のように基本的に余白が有りません。

こういったものは入れ子にしたりラベル系にしたりでで余白を作る事になります。

H2

div

labelで表現

<h2 class="bg-primary">H2</h2>
<div class="bg-primary">H2</div>
<div class="label label-primary">labelで表現</div>

正直なとこ面倒くさいです

学習が足りないとかそういう事じゃなく、色んなものを入れ子にしたり加えたり、無理をして表現しているものが少なく有りません。

なので、こんなスタイルを自分用のCSSに書いてしまいます。

<style type="text/css">
  .padding8{
    padding: 8px;
  }
  .padding12{
    padding: 12px;
  }
</style>

class="bg-primary padding12"

class="bg-primary padding8"

1 2	`<p` `class="bg-primary padding12"> class="bg-primary padding12" </p>` `<p` `class="bg-success padding8"> class="bg-primary padding8" </p>`

明確で解りやすいです。

widthの問題

フォームの方で少し書きましたが、幅の狭いボックスを作るとき、グリッドシステムで書く事になります。或いはインライン。

col-sm-3

<div class="container">
  <div class="row">
    <div class="col-sm-3 bg-primary">col-sm-3</div>
  </div>
</div>

幅指定されるデザインもあるんです。

そもそもBootstrapを使う場合は、Bootstrapを理解しているデザイナーさんがデザインしないとダメなのだと思われます。

しかし、実際の現場ではスタイルシート？何それ美味しいの？って言うDTP畑のデザイナーさんが入稿してくることもしばしば。

それ無理っくり自分でCSS書いてレスポンシブにするんですが、正直つらい

こうしてしまう

ちゃんとレスポンシブになります。

class="bg-primary myWidth400px"

<div class="bg-primary myWidth400px padding12">class="bg-primary myWidth400px"</div>
 
  .myWidth400px{
    width: 400px;
  }
  @media screen and (min-width:320px) and (max-width: 959px){
    .myWidth400px{
      width: 100%;
    }
  }

幅に関しては、たくさん指定するのは非効率ですが、例えばサイドバーとメインだけはどうしても幅を固定化しないとならない、12の法則で対応出来ないなどの場合は有効だと思います。

工数削減になるかどうか

以前、とあるホームページのデザインを持ち込まれ、Bootstrapを使ってレスポンシブにコーディングして欲しいと依頼されました。

エンドユーザーは「これ使うと簡単に出来るから安くなるんでしょ？」との弁。

Bootstrapを紹介するサイトの「初心者でも簡単に！」とか「HTMLの知識が無くとも！」とか、そういう紹介は問題があると思います。

Bootstrapをテンプレで作るなら簡単でしょうが、それを理解していない方がデザインしたものをBootstrapで作れと言われても無理です。

無理というより、どうにかしようとグリッドデザインで悩むよりも、自分でコード書いた方が数倍早いです。

決してBootstrapを貶めるつもりは有りませんが、Bootstrapの規則に則ったデザインを提案せずに、いつもどおりのデザインを描いてBootstrapでコーディングして欲しいと言われても、余計な工数が掛かってしまいます。

Bootstrapは選択肢の1つであり、全てのホームページ制作の現場がBootstrap主流になる訳ではないのだと理解した方が良いと思います。