网页布局

1.网格布局

网格布局就是把网页分为许多小格子，看起来像table，然后在每个小格子中放我们的内容。当然，我们也可以指定一片区域使用网格系统。网格布局主要是应用在移动设备上的，使用方法如下：

使用行来创建列的水平组

行必须放置在 .container class 内

每行会自动产生十二个列，内容需要跨列需使用col-xs-4等类

内容应该放置在列内，且唯有列可以是行的直接子元素

示例代码

1  2  3  4 
      5 start 6 
      7  8  9 
     10 
     13 14 15 
     
      16   
      布局使用bootstrap网格系统布局
17   
      这是一个段落
18   
      
       19     
       
        20       
        区块一
21       
        这是一个段落
22     
       
23     
       
        24       
        区块二
25       
        这是一个段落
26     
       
27     
       
        28       
        区块三
29       
        这是一个段落
30     
       
31   
      
32 
     
33 34

效果:

我们会发现第一个最宽，第二个次之，第三个最小。

关于网格布局的详细说明可以参考以下链接:

2.嵌套布局

在下面的示例代码中我们可以看到，在一个网格中，我们有加入了新的网格(class="row"),这就是所谓的嵌套布局，加入的网格每行仍然是12格。

1  2  3  4 
      5 start 6 
      7  8  9 
     10 
     13 14 15 
     
      16   
      布局使用bootstrap网格系统布局
17   
      这是一个段落
18   
      
       19     
       
        20       
        区块一
21       
        这是一个段落
22     
       
23     
       
        24       
        区块二
25       
        这是一个段落
26       
        
         27         
         
           区块二一区块二一区块二一区块二一区块二一 
         
28         
         
           区块二二区块二二区块二二区块二二区块二二区块二二 
         
29       
        
30     
       
31     
       
        32       
        区块三
33       
        这是一个段落
34     
       
35   
      
36 
     
37 38

效果：

3.流动布局

使用流动布局会根据页面窗口的大小自动去缩放，我们知道网格是放在容器中的，前面的容器大小是固定的，比如(720px之类的)，使用流动布局容器的大小则使用的是百分比。


     start
     
     
     
       
      布局使用bootstrap网格系统布局
  
      这是一个段落
  
          
             
        区块一
      
        这是一个段落
    
       
    
             
        区块二
      
        这是一个段落
      
                
         
           区块二一区块二一区块二一区块二一区块二一 
         
        
         
           区块二二区块二二区块二二区块二二区块二二区块二二 
         
      
        
    
       
    
             
        区块三
      
        这是一个段落

效果:(流动布局和固定布局在显示效果差异上并不明显，这和网页的复杂程度有关)

4.响应式布局

由于上网设备的差异(电脑，笔记本，手机)，同一个页面在不同设备上的显示效果不同，甚至很糟糕。为了避免这种情况，可以使用响应式布局。响应式布局就是根据屏幕尺寸的大小来使用不同的css。


     start

代码中的@media(max-width:500px)表示屏幕大小在0-500px时，使用大括号中的css代码。相应的@media(min-width:500px)表示屏幕在500px以上的时，使用相应的样式。

bootstrap中也提供了响应式的css,不过需要去官网定制下面的链接也提供了响应式的css文件下载。

转载于:https://www.cnblogs.com/xidongyu/p/5312609.html

你可能感兴趣的文章