css - Bootstrap 基础

Question

我是 bootstrap 的新手，我对这种基本情况非​​常困惑，我觉得如果不了解网格系统我就无法前进。

问题 1:我如何知道某个设备对另一个设备的等效类前缀。示例:col-md-6 如果我想将它显示给较小的设备，它的等效项是什么，col-sm- 是什么X 还是 col-xs-X？我真的对网格系统感到困惑。

问题 2:我遇到了 Bootstrap 教程。而且我很困惑，为什么他将 col-sm-10 放在商店横幅中，在 960 网格中只需要 6 列，为什么不是 col-sm-6？请参阅所附图片。

在下图中，我指的是按钮区域

<div class="container top-description-app">
        <div class="row">
            <div class="col-sm-6 top-description-text">
                <h1>Hello</h1>
                <h3>We take mobile photography to a brand new level.</h3>
                <p>With our free app you can take amazing photos straigh your phone.</p>
                <div class="col-sm-10 stores-banners">
                    <a href="#" class="btn btn-success">Get the free app</a>
                    </br>
                    <a href="#"><img src="img/apple-banner.png" alt="App Store"></a>
                    <a href="#"><img src="img/google-banner.png" alt="Google Store"></a>
                </div>
            </div>
            <div class="col-sm-6 top-iphone-wrapper">                   
                <img src="img/iphone-header.png" alt="iPhone app">
            </div>
        </div>
    </div>

希望你能帮助我 guyx。提前致谢。

Answer 1

1. 这取决于您希望您的网站在不同屏幕尺寸下的显示效果。

基本上，xs - 移动设备，sm - 平板电脑，md - 台式机，lg - 大型台式机。

例子:

p {
  height: 200px;
  margin-bottom: 20px;
  background: #ccc;
 }

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-12"><p></p></div>
    <div class="col-sm-6 col-md-12"><p></p></div>
  </div>
</div>

此代码意味着您将拥有:1 列移动设备 (xs)、2 列平板电脑 (sm) 和 1 列台式机 (md) 和大型台式机 (lg)。

1. 您提供的代码并不完全正确。如果您将 col- 类嵌套在另一个 col- 类中，您应该创建另一行。

<div class="container top-description-app">
  <div class="row">
    <div class="col-sm-6 top-description-text">
      <h1>Hello</h1>
      <h3>We take mobile photography to a brand new level.</h3>
      <p>With our free app you can take amazing photos straigh your phone.</p>
      <div class="row">
        <div class="col-sm-10 stores-banners">
          <a href="#" class="btn btn-success">Get the free app</a>
          </br>
          <a href="#"><img src="img/apple-banner.png" alt="App Store"></a>
          <a href="#"><img src="img/google-banner.png" alt="Google Store"></a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 top-iphone-wrapper">
      <img src="img/iphone-header.png" alt="iPhone app">
    </div>
  </div>
</div>

这段代码意味着你将在这个 col-sm-6 类中有 col-sm-10(所以 12 列中的 10 列占据了这个 col -sm-6 列)。

例子:

p {
  display: block;
  margin-bottom: 20px;
  background: #ccc;
  height: 150px;
}
span {
  background: #333;
  color: #fff;
  display: block;
  height: 100px;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Column</p>
      <div class="row">
        <div class="col-sm-6">
          <span>Column in another column</span>
        </div>
        <div class="col-sm-6">
          <span>Column in another column</span>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <p>Column</p>
    </div>
  </div>
</div>