如何使用bootstrap 2.0的响应功能 [英] How to use responsive features of bootstrap 2.0

问题描述

我使用twitter的bootstrap 2.0，并且不确定如何让响应。

• 如何在移动/


• 如何替换元素（即用较小的图片替换大图片）？


• 更改< h2> 为< h5> ？
  
  p>您可以隐藏元素：

    display：none; 
   visibility：hidden;希望你使用LESS或SASS，所以你可以只指定：
   
   
   b 
   
    @mixin hidden {
   display：none; 
   visibility：hidden; 
  } 
    
  然后在需要时轻松混合：
   页脚{
   @include hidden; 
  } 
    
  只需将它们应用于相关媒体查询中的任何选择器即可。此外，了解媒体查询级联到较小的媒体查询。 
   
   
   
  替换图片
   $ b $ 如果隐藏宽媒体查询中的元素（平板电脑大小），则元素将保持隐藏。 b 
   
   Bootstrap不会在屏幕缩小时提供图像调整大小，但您可以在媒体查询中使用CSS手动更改图像的尺寸。
   
   
   
  但我喜欢的一个特定的解决方案是从这篇博客： http://unstoppablerobotninja.com/entry/fluid- 
    / *您可以改用.flexible，并赋予class =flexible b $ b图像你想有这个属性* / 
   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％; 
  } 
  } 
    
   
  I'm using bootstrap 2.0 from twitter and unsure how to make it responsive.
  
  
  How can I remove elements when in mobile/small screen mode?
  How can I replace elements (i.e replace a big picture with a smaller one)?
  Change a <h2> to be <h5>? etc.
  
  解决方案
  Hiding Elements
  
  You can hide elements with:
  display: none;
  visibility: hidden;
  Hopefully you're using LESS or SASS so you can just specify:
  @mixin hidden {
    display: none;
    visibility: hidden;
  }
  And then easily mix it in when necessary:
  footer {
    @include hidden;
  }
  Just apply them to any selector in the relevant media query. Also, understand that media queries cascade onto smaller media queries. If you hide an element in a wide media query (tablet sized), then the element will remain hidden as the website shrinks.
  
  Replacing Images
  
  Bootstrap doesn't offer image resizing as the screen shrinks, but you can manually change the dimensions of images with CSS in media queries.
  
  But a particular solution I like is from this blog post: 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%;
  }
  Now images will only appear in their full dimensions if they don't exceed their parent container, but they'll shrink fluidly as their parent element (like the <div> they're in) shrinks.
  
  Here's a demo: http://unstoppablerobotninja.com/demos/resize/
  
  To actually replace images, you could swap the background image with CSS. If .logo has background: url("logo.png");, then you can just specify a new background image in a media query with .logo { background: url("small-logo.png");
  
  Change h2 to h5
  
  If this is because you want to change the size of the heading, don't do this. H2 has semantic value: It's not as important as H1 and more important than H3.
  
  Instead, just specify new sizes for your h1-h6 elements in media queries as your website gets smaller.
  @media (max-width: 480px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 80%;
    }
  }
  
  
                          
  这篇关于如何使用bootstrap 2.0的响应功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！