首页 > 其他 > 详细

Bootstrap框架——布局常用样式

时间:2019-11-23 22:25:54      阅读:96      评论:0      收藏:0      [点我收藏+]

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局,并且在V3版本之后坚持移动设备优先。

Bootstrap是一个前端开发的框架,其实就是一堆HTML代码,有一些自带的CSS样式类(只需要记忆常用的CSS样式类)

官网链接地址:https://v3.bootcss.com/

1-布局容器类——container

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

2-栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。栅格系统提供了48个类

 设备分类 

  超小屏幕-手机(<768px) 小屏幕-平板(>=768px)  中等屏幕-PC端屏幕(>=992px)  大屏幕-台式显示器(>=1200px)
.container最大宽度 None (自动)  750px 970px 1170px
类前缀 .col-xs .col-sm .col-md  .col-lg
所占列数
默认占12列
例:.col-sm-3:表示在小屏以上,一个元素占3列,一行可以放三个元素    
偏移(offsets)
col-xs-offset-偏移列数
col-sm-offset-偏移列数
col-md-offset-偏移列数
col-lg-offset-偏移列数

 

 

Bootstrap框架——布局常用样式

原文:https://www.cnblogs.com/s-w-f/p/11920407.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!