bootstrap记录 - 爱码网

 1 <div class="container">
 2             <h1>
 3              Hello,world!
 4          </h1>
 5             <div class="row">
 6                 <div class="col-lg-2">
 7                     <h2 class="page-header">
 8              区域一
 9          </h2>
10                     <p>
11                         Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
12                     </p>
13                 </div>
14                 <div class="col-lg-6">
15                     <h2 class="page-header">
16             区域二
17         </h2>
18                     <p>
19                         Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
20                     </p>
21                 </div>
22                 <div class="col-lg-4">
23                     <h2 class="page-header">
24             区域三
25         </h2>
26                     <p>
27                         Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
28                     </p>
29                 </div>
30             </div>
31         </div>
32 当使用.col-lg-*的时候表示在大屏幕中是按照单行显示,全部显示在一行,在屏幕缩小到阈值的时候就变成多行显示,如果设置为.col-sm-*时,因为规定了在小屏幕显示的时候是单行显示,所以无论怎样拖动屏幕的大小都是单行显示.
View Code