用bootstrap做一个栅格系统，超大屏和大屏一行显示12个栅格，中屏一号显示6个栅格，小屏一行显示4个栅格，超小屏一行显示一个栅格。

可以使用Bootstrap的栅格系统来实现这个布局，以下是示例代码：

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">超大屏和大屏显示12个栅格</div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">中屏显示6个栅格</div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">中屏显示6个栅格</div>
  </div>
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">小屏显示4个栅格</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">小屏显示4个栅格</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">小屏显示4个栅格</div>
  </div>
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">超小屏显示1个栅格</div>
  </div>
</div>

在这个示例中，我们使用了`container`类来包裹整个栅格布局，然后使用`row`类创建行。在每一行中，我们使用`col-lg-*`（超大屏和大屏）、`col-md-*`（中屏）、`col-sm-*`（小屏）和`col-xs-*`（超小屏）类来指定每个栅格的大小，其中`*`表示栅格的数量。通过这种方式，我们可以轻松地创建响应式布局，以适应不同屏幕大小的设备。