专栏首页十月梦想bootsrap栅格系统

bootsrap栅格系统

一.移动设备优先

在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏

幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。

//分别为:屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放

声明手机页面

<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">

二. 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等 属性的原因,这两种容器类不能相互嵌套。 

//固定宽度

<div class="container">
......</div>

//100%宽度

<div class="container-fluid">
......</div>

栅格系统介绍:

栅格体系以标准每行12列为基准.。通过一系列的行(row) 与列(column)的组合来创建页面布局。

每一行的内容可以通过class类名进行分配在一行每个元素区块站12列的多少,每一行的元素区块最大为12列,超过则进行换行.接下来看一个简单的栅格系统构建例子!

<div class="contaner-fluid">
//100%宽度构建一个栅格区域
<div class="row">//创建一个响应式的行
<div class="col-md-4">我是本行第一个元素块</div>
<div class="col-md-5">我是本行第二个元素块</div>
<div class="col-md-3">我是本行第三个元素块</div>
</div>
</div>

这样一个简单的栅格系统(单行)布局就完成了

col-md-表示在中等屏幕下的分布,col-md-4表示中等屏幕(md)下占据单行的4列,单行不得超过12列否则显示在第二行.

下面看一下完整的栅格参数

超小屏幕 手机 (<768px)

小屏幕 平板 (≥768px)

中等屏幕 桌面显示器 (≥992px)

大屏幕 大桌面显示器 (≥1200px)

栅格系统行为

总是水平排列

开始是堆叠在一起的,当大于这些阈值时将变为水平排列C

.container 最大宽度

None (自动)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列(column)数

12

最大列(column)宽

自动

~62px

~81px

~97px

槽(gutter)宽

30px (每列左右均有 15px)

可嵌套

偏移(Offsets)

列排序

在基础的栅格自适应页面上可以完善一下,进行不同尺寸设备显示的适应

<div class="container-fluid">
		<div class="row">
			<div class="col-lg-5 col-sm-3 col-md-5 a">我是第一行的响应式内容1</div>
			<div class="col-lg-3 col-sm-3 col-md-3 a">我是第一行的响应式内容2</div>
			<div class="col-lg-2 col-sm-3 col-md-2 a">我是第一行的响应式内容3</div>
			<div class="col-lg-2 col-sm-3 col-md-2 a">我是第一行的响应式内容4</div>
		</div>
		<div class="row">
			<div class="col-lg-3 col-sm-3 col-md-3 a">我是第二行的响应式内容1</div>
			<div class="col-lg-2 col-sm-3 col-md-2 a">我是第二行的响应式内容2</div>
			<div class="col-lg-5 col-sm-3 col-md-5 a">我是第二行的响应式内容3</div>
			<div class="col-lg-2 col-sm-3 col-md-2 a">我是第二行的响应式内容4</div>
		</div>
		<div class="row">
			<div class="col-lg-5 col-md-4 col-sm-3 col-xs-2 a">我是第三行的响应式内容1</div>
			<div class="col-lg-2 col-md-4 col-sm-2 col-xs-2 a">我是第三行的响应式内容2</div>
			<div class="col-lg-3 col-md-4 col-sm-2 col-xs-2 a">我是第三行的响应式内容3</div>
			<div class="col-lg-2 col-md-4 col-sm-5 col-xs-2 a">我是第三行的响应式内容4</div>
		</div>
	</div>

根据多行可以进行多样化调用类名,实现不同设备进行不同排列,构建完善的页面布局!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动端适配之百分比适配

    前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

    十月梦想
  • 一天带入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    十月梦想
  • Express框架之路由已经表单自提交

    正则表达式可以被使用。正则表达式中,未知部分用圆括号分组,然后可以用req.params[0]、[1]得到。

    十月梦想
  • 分布式锁的技术选型及思考

    在计算机中,锁的作用是解决在并发状态下的共享资源互斥问题,保证在同一时间只有一个进程/线程可以掌握资源的控制权。

    CSDN技术头条
  • 基于python语言的tensorflow的‘端到端’的字符型验证码识别源码整理(github源码分享)

    基于python语言的tensorflow的‘端到端’的字符型验证码识别 1   Abstract 验证码(CAPTCHA)的诞生本身是为了自动区分 自然人 和...

    用户1170933
  • .NET领域驱动设计—初尝(疑问、模式、原则、工具、过程、框架、实践)

    我们在设计业务系统的时候都会存在一个非常棘手而又无法回避的问题“业务扩展性”、“业务灵活性、”面向对象化“,尽管我们熟练掌握设计思想、设计模式、设计原则等等关于...

    王清培
  • 动态代理

    在java的动态代理机制中,有两个重要的类或接口,一个是 InvocationHandler(Interface)、另一个则是 Proxy(Class),这一个...

    提莫队长
  • JavaScript设计模式之装饰器模式

    手机壳就是装饰器,没有它手机也能正常使用,原有的功能不变,手机壳可以减轻手机滑落的损耗。

    FinGet
  • 手把手的SpringBoot教程,SpringBoot创建web项目(二)

    剽悍一小兔
  • ASP.NET Core gRPC 使用 Consul 服务注册发现

    gRPC 在当前最常见的应用就是在微服务场景中,所以不可避免的会有服务注册与发现问题,我们使用gRPC实现的服务可以使用 Consul 或者 etcd 作为服务...

    晓晨

扫码关注云+社区

领取腾讯云代金券