bootstrap的布局(container、row、col-xs-4)

 时间:2024-10-12 00:51:14

1、Bootstrap内置了一套响应式、移动设备优先的12列格网布局系统,它会随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列

bootstrap的布局(container、row、col-xs-4)

3、页面显示如下:排成一列,然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了,反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格,那么就添加一个col-xs-6的类、占用四个网格就添加一个col-xs-4的类,然后在同一排的周围进行使用带有row类的容器

bootstrap的布局(container、row、col-xs-4)

4、总结:1、container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width,用以匹配栅格系统。2、col-xs-4:这个类通过"-"分为三个部分,第三个部分的数字作为一个泛指,它的范围是1到12。就是可以把一个区域分为12个栏,这个要和row类联合使用。其实这个布局很像HTMl中的Table布局tr行和td列

  • 卡通护手霜设计
  • 如何在ps中给文字添加鱼形和投影样式
  • 给图片添加扩散亮光效果用PS怎么操作?
  • photoshop怎么给灯泡加上火焰效果?
  • PS2017软件中如何给图片添加点状纹理效果
  • 热门搜索
    佳木斯旅游景点大全 1月适合去哪里旅游 永春旅游景点大全 章丘旅游景点大全 江西婺源旅游价格 常州旅游商贸网络课程 新西兰最佳旅游时间 旅游景区规划 海南旅游局官网 鞍山旅游景点大全