web-dev-qa-db-ja.com

bootstrap 2.0のレスポンシブ機能の使用方法

Twitterのbootstrap 2.0を使用していますが、応答性を高める方法がわかりません。

  • モバイル/小画面モードで要素を削除するにはどうすればよいですか？
  • どうすれば要素を置き換えることができます（つまり、大きな絵を小さな絵に置き換えますか）？
  • <h2>を<h5>に変更しますか？等.
htmlcsstwitter-bootstrap
27
raklos

要素を隠す

以下を使用して要素を非表示にできます。

_display: none;
visibility: hidden;
_

次のように指定できるように、LESSまたはSASSを使用していることを願っています。

_@mixin hidden {
  display: none;
  visibility: hidden;
}
_

そして、必要なときに簡単に混ぜます：

_footer {
  @include hidden;
}
_

関連するメディアクエリのセレクタに適用するだけです。また、メディアクエリがより小さいメディアクエリにカスケードすることを理解してください。ワイドメディアクエリ（タブレットサイズ）で要素を非表示にすると、Webサイトが縮小しても要素は非表示のままになります。

画像の置き換え

Bootstrapでは、画面が縮小しても画像のサイズ変更はできませんが、メディアクエリでCSSを使用して画像のサイズを手動で変更できます。

しかし、私が好きな特定の解決策は、このブログ投稿からです： http://unstoppablerobotninja.com/entry/fluid-images/

_/* You could instead use ".flexible" and give class="flexible" only to 
   images you want to have this property */
img { 
  max-width: 100%;
}
_

これで、画像は、親コンテナを超えない場合に完全なサイズでのみ表示されますが、親要素（_<div>_など）が縮小するにつれて流動的に縮小します。

デモは次のとおりです。 http://unstoppablerobotninja.com/demos/resize/

実際に画像を置き換えるには、背景画像をCSSと交換できます。 _.logo_にbackground: url("logo.png");がある場合、.logo { background: url("small-logo.png");を使用してメディアクエリに新しい背景画像を指定するだけです。

H2をh5に変更

これが見出しのサイズを変更するためである場合、これをしないでください。 H2にはセマンティックな価値があります。H1ほど重要ではなく、H3よりも重要です。

代わりに、ウェブサイトが小さくなるにつれてメディアクエリでh1-h6要素の新しいサイズを指定するだけです。

_@media (max-width: 480px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 80%;
  }
}
_
47
danneu

ここ数日間、bootstrapのレスポンシブな部分で遊んでいます。 / less/responsive.less ブートストラップのレスポンシブ機能をどのように利用できるかのアイデアを得るため。

基本的にブラウザの幅/高さを見て、ページに適用するcssプロパティを決定します。したがって、たとえば、ユーザーがより小さいデバイスを使用しているときにh2を変更する場合は、次のようにします。

@media (max-width: 480px) {
    h2 { font-size: 15px; }
}

これは、画面のサイズが変更されたときに影響を与える任意のスタイルで実行できます。

Css置換メソッドを利用していくつかの要素を置換し、異なるスタイルが異なる幅で物事に影響するようにすることができます。または、jqueryまたはresponse.jsを使用して実行できます。私はまだこの部分で遊んでいます。

5
notzach

レスポンシブ画像の場合

.responsive-image { max-width:100%; height:auto; }

これを次のように使用できます

<img src="testimage.jpg" border="0" alt="blank image" class="responsive-image">

レスポンシブナビゲーションの場合

Tinynavを使用 https://github.com/viljamis/TinyNav.js

これにより、<ul>および<ol>小さな画面の選択ボックスへのナビゲーション。

4
Gandalf

あなたの最初の質問について-あなたが尋ねたときにこれが利用可能であったかどうかはわかりませんが、Bootstrapには、要素の非表示を処理するクラス「hidden-phone」、「visible-desktop」などがあります.hidden-phoneクラスを要素に追加するだけで、幅が768pxより小さい画面では消えます。

[〜＃〜] edit [〜＃〜]

bootstrap 3のリリース後、2.3.2ドキュメントは次の場所にあります。

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

新しい3.xドキュメントは次の場所にあります。

http://getbootstrap.com/css/#responsive-utilities

1
Carl

bootstrapにはこのための組み込み機能があります（ responsive-utilities.less ）：

<a href="#">
  <span class="visible-desktop">Click here to get more information</span>
  <span class="visible-tablet">More information</span>
  <span class="visible-phone">Info</span>
</a>
0
yegor256