30

Bootstrapを使用して単純なHTMLページで遊んでいます。たとえば、 Framelessのような別の色合いとして実際のコンテンツの「下」に表示されるように、列を視覚化する方法が欲しいです。その機能を簡単にする方法はありますか？

4

7 に答える 7

37

Bootstrap 3 に対する Sherbrow の回答を更新しました。

div[class="row"] {
    outline: 1px dotted rgba(0, 0, 0, 0.25);
}

div[class^="col-"] {
    background-color: rgba(255, 0, 0, 0.2);
    outline: 1px dotted rgba(0, 0, 0, 0.5);
}
于 2014-11-04T23:32:29.700 に答える
15

You can use some CSS with the background to see the grid :

[class*="span"] { background: #EEF; }
[class*="span"] [class*="span"] { background: #FEE; }

Demo 1 (jsfiddle)

As suggested by Pavlo, you can also use a semi-transparent color which would give you different shades depending on the nesting (rgba browser support) :

[class^="span"] { background-color: rgba(255, 0, 0, 0.3); }

Demo 2 (jsfiddle)

The same goes with .row or any element of the grid.

Note: the choice between *= or ^= doesn't really matter in this case, see this (w3.org) for more info

于 2012-10-07T17:09:16.820 に答える
11

Firefox、Chrome、Safari、またはその他の Webkit ブラウザーを使用している場合は、以下のページに移動し、ブックマークにドラッグしてブックマークレットを「インストール」します。

次に、ブックマークレットをクリックしてフレームワークを選択することで、ファンデーションまたはブートストラップを使用して任意のページのグリッドを表示できます。

http://alefeuvre.github.io/foundation-grid-displayer/

于 2013-06-06T04:24:05.457 に答える
1

必要に応じて、コンソールから簡単な jQuery/javascript関数 を使用します。12 グリッドでのみ機能しますが、賢くなるでしょう。オーバーレイを閉じたり、リンクをクリックしたりすることはできません。ページをリロードするだけです。

function bootstrap_overlay() {

  var docHeight = $(document).height();
  var grid = 12, 
  columns = document.createDocumentFragment(), 
  div = document.createElement('div');

  div.className ='span1';
  while (grid--) {
    columns.appendChild(div.cloneNode(true));
  }
  var overlay = $('<div id="overlay"></div>');
      overlay.height(docHeight)
          .css({
           "opacity" : 0.4,
           "position": "absolute",
           "top": 0,
           "left": 0,
           "width": "100%",
           "z-index": 5000
          })          
          .append('<div class="container"><div class="row"></div></div>')
          .click(function(){ $(this).remove(); })
          .find('.row').append(columns);
   $("body").append(overlay);
   $("#overlay .span1").css({
       "opacity" : 0.4,
       "background-color": "red"
    }).height(docHeight);
}
于 2013-06-06T01:19:50.093 に答える
0

Bootstrap 3 には異なるクラス名 ( span*> col-*-*) があり、パディングを使用して列間にガター (間隔) を作成するため、列に a を入れるだけbackground-colorではガターが表示されません。

Bootstrap 3 ではbackground-clip: content-box、コンテンツ領域内の背景色のみを表示するように追加できます...

 .row [class*='col-'] {
      background-color: #ffeeee;
      background-clip: content-box;
      min-height: 20px;
}

http://codeply.com/go/pejyqLlrBF

于 2016-07-05T16:43:29.650 に答える