使用BootStrap网格布局进行一次演示-白红宇

使用BootStrap网格布局进行一次演示

阅读量：4623 次

发布时间：2019-06-09

本文共 853 字，大约阅读时间需要 2 分钟。

1  2  3  4     
      5     BootStrap 6     
      7      8      9 10 11     12     
     13     
     14     
     15     
     18 19 20 
     
      21     
      布局22         使用BootStrap网格布局23     
24     
      段落文字
25     
      
       26         
       
        27             
        区块1
28             
        段落文字
29         
       
30         
       
        31             
        区块2
32             
        段落文字
33         
       
34         
       
        35             
        区块3
36             
        段落文字
37         
       
38     
      
39 
     
40 41

说明：

container作为网格布局的容器，设置后，内部的所有内容，都会左右两边空出一定距离后居中显示

row内部的所有元素，都横向排列 span4 表示内部元素占用4格，同理：span1就是一格 对于BootStrap而言，其将显示屏幕横向分成了12格（这也就是为什么叫它网格布局的原因了）

显示效果如下：

BootStrap3和BootStrap2是不兼容的，类名发生了变化 如上面的span4，是BootStrap2中的类名，在BootStrap3中，其类名为 col-sm-4

转载于:https://www.cnblogs.com/sherrykid/p/5744082.html

你可能感兴趣的文章

vue+element-ui实现表格checkbox单选

查看>>

测试开发学习进阶教程视频&PDF

查看>>

C#基础-连接Access与SQL Server

查看>>

autofac

查看>>

MacOS 系统终端上传文件到 linux 服务器

转 Merkle Tree（默克尔树）算法解析

Phonegap移动开发:布局总结(一) 全局

SQL函数——LENGTH()和LENGTHB()

查看>>