Bootstrap整体框架之CSS12栅格系统
发布时间:2020-12-18 00:45:16 所属栏目:安全 来源:网络整理
导读:1.整体架构 BootStrap框架公共六个部分:(css组件和js插件是其表现形式,其余的是基础支撑平台) 表现形式 CSS组件 JS插件 基础支撑平台 CSS12栅格系统 基础布局组件 jQuery 响应式设计 1.1 CSS12栅格系统 12栅格系统是BootStrap的核心功能,也是响应式设计核
1.整体架构BootStrap框架公共六个部分:(css组件和js插件是其表现形式,其余的是基础支撑平台) 表现形式 CSS组件 JS插件 基础支撑平台 CSS12栅格系统 基础布局组件 jQuery 响应式设计 1.1 CSS12栅格系统 12栅格系统是BootStrap的核心功能,也是响应式设计核心理念的一个实现方式。 1.1.1 实现原理 栅格布局原理:定义容器大小,平分12分,在调整内外边距,最后结合媒体查询,制作出强大响应式的栅格系统。 1.最外层的边框,伴随着响应式思想,区分了四种类型浏览器,像素分界点768px、992px、1200px 2.第二层的边框,即.container样式容器,针对四种浏览器宽度不一样,值是自动、750px、970px、1170px 3.1号横条,左内边距和右内边距是15px,是12个col-lg-1,没有row,则会 <div class="jb51code"> <title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
|