下面是详细的攻略：

Bootstrap3.0学习笔记之栅格系统原理

栅格系统是什么

栅格系统是Bootstrap中的一个关键组件，它用于构建响应式布局。栅格系统将屏幕划分为多个列，每列的宽度是相等的。通过栅格系统，你可以使用CSS类来在各种设备上控制列的宽度、位置和顺序。

栅格系统原理

Bootstrap的栅格系统由三个主要的理念组成：容器、行和列。

容器

容器是用来包含网页内容的最外层元素，其作用是在不同的设备上实现一致的页面布局。Bootstrap中的容器有两种：.container 和 .container-fluid。其中，.container 所包含的内容是固定宽度的，而 .container-fluid 则是占满整个宽度的。

行

行是列的容器，每一行有12个等宽的列。行必须位于容器内，每行必须包含12个列，这样才能使列在不同的设备上正确地排列和完成布局。

列

每个列元素最多可以指定12个列，而每一个列元素占据的宽度则通过列的类名来指定。列的类名由两部分组成，第一部分定义了设备大小，第二部分定义了列的宽度。以下是常用的列的类名：

• .col-md-（int） : 在中等屏幕上占据 int 个列，float:left;(float:left表示向左浮动。)
• .col-sm-（int） : 在小型屏幕上占据 int 个列，float:left;
• .col-xs-（int） : 在超小型屏幕上占据 int 个列，float:left;
• .col-lg-（int） : 在大型屏幕上占据 int 个列，float:left;

其中，（int）的值为1-12之间的整数。

以下是一个示例，假设我们要创建一个三列布局，其中左右两列各占3个列，中间的列占据6个。

<div class="container">
  <div class="row">
    <div class="col-md-3">左边的列</div>
    <div class="col-md-6">中间的列</div>
    <div class="col-md-3">右边的列</div>
  </div>
</div>

在上面的示例中，我们在.container中创建了一行.row，并在行内分别创建了三个列，其中左右的列均占据3个列，中间的列占据了6个列。

示范

下面，我们给出两个具体的示例。

示例1：自适应的两部分

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-8">左侧内容</div>
    <div class="col-sm-6 col-md-4">右侧内容</div>
  </div>
</div>

在这个示例中，我们在.container中创建了一个.row，其中包含了一个左列与右列两个元素。在小屏幕设备上，.col-sm-6使得左列和右列同时占用50%的宽度，此时它们会叠在一起。而在中等屏幕设备上，左列和右列分别占据了8个与4个列的宽度，整个布局根据比例自然地铺开。

示例2：最大宽度内容

<div class="container">
  <div class="row">
    <div class="col-lg-12">全屏的内容</div>
    <div class="col-lg-4 col-md-6">左侧列</div>
    <div class="col-lg-4 col-md-6">中部列</div>
    <div class="col-lg-4 col-md-12">右侧列</div>
  </div>
</div>

在这个示例中，我们在.container中创建了一个.row，其中包含了四个列元素。其中，第一个占据了12个大屏幕的列元素（宽度），使得这个元素的宽度为最大宽度。接下来的3个元素均通过栅格系统被分配了合适的宽度，整个布局同时保证了在不同的设备上都具有良好的可读性和排版效果。

总结

以上就是Bootstrap3.0栅格系统的原理以及两个示例的完整讲解。掌握栅格系统是实现响应式布局的重要一步，它可以让你轻松地管理页面的排版和布局。