文档章节

bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义

卡特酋长
 卡特酋长
发布于 2016/12/06 00:01
字数 289
阅读 36
收藏 0

首先说明:

1、col-列;

2、xs-maxsmall,超小;sm-small,小;md-medium,中等;

3、-*表示占列,即占自动12列栅格系统比;

4、col-xs-*超小屏幕 手机 (<768px),

.col-sm-*小屏幕 平板 (≥768px),

.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).

5、不管在哪种屏幕上,栅格系统都会自动的分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 div占所占列数。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是: .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半(6/12) ,.col-md-3 在中单屏幕中占3列也就是1/4(3/12)。

6、反推,如果我们要在小屏幕上并排显示3个div(12/3个=4 列 ),则col-xs-4;在大屏幕上显示6个div(12/6个=2列 ) ,则 col-md-2; 这样我们就可以控制我们自己想要的什么排版了。

© 著作权归作者所有

共有 人打赏支持
卡特酋长
粉丝 0
博文 1
码字总数 289
作品 0
南京
技术主管
私信 提问
深入理解BootStrap之栅格系统(布局)

1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫...

Airship
2016/11/18
17
0
bootstrap入门1

作为back-end也用了一段时间的bt,但是对其或者说对front-end就不是特别了解,在从新学习之际,写此已做记录。 1 container, container-fluid 两个最基本要素是相同的,只不过container添加了...

小昭归来
2016/10/11
1
0
bootstrap 栅格系统

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- 768 992 1200 小于768.col-xs- 大于......

kitty1116
03/12
0
0
Bootstrap 网格系统

Bootstrap 网格系统 本章节我们将讲解 Bootstrap 的网格系统(Grid System)。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动...

wybo521
2016/01/25
27
0
Bootstrap 栅格系统简介

目录 1、简介 2、栅格选项 3、列偏移 4、嵌套列 5、列排序 1、简介 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多...

DanielYue
06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ubuntu美化记,-修改皮肤,安装工具。

事情由来 最近系统盘坏了,换了新SSD,也换了新版的ubuntu 18.04LTS;不得不说,ubuntu 的桌面搞的越来越漂亮了。 把调整过的zsh shell样式,截个图上来镇一下楼: 添加了对python virtuale...

janl
17分钟前
2
0
阿里云物联网边缘计算加载MQTT驱动

写在前面 本文在LinkEdge快速入门样例驱动的基础上,加载了MQTT订阅的客户端,使得边缘端容器可以通过MQTT获得外部数据。 1. 系统需求 物联网边缘计算平台,又名Link IoT Edge[1]。在物联网边...

阿里云云栖社区
18分钟前
1
0
错误: 找不到或无法加载主类

在IDEA的使用过程中,经常断掉服务或者重启服务,最近断掉服务重启时突然遇到了一个启动报错: 错误:找不到或无法加载主类 猜测:1,未能成功编译; 尝试:菜单---》Build---》Rebuild Pro...

安小乐
34分钟前
2
0
vue路由传参,刷新页面,引发的bug

最近遇到一个bug 通过vue路由跳转到页面, 然后接参控制(v-if ),成功显示 而刷新页面,显示失败。 苦苦地找了半天原因,打印参数发现正确,再打印下类型......,路由跳过来会保持传参时的...

hanbb
35分钟前
3
0
【58沈剑 架构师之路】InnoDB,select为啥会阻塞insert?

MySQL的InnoDB的细粒度行锁,是它最吸引人的特性之一。 但是,如《InnoDB,5项最佳实践》所述,如果查询没有命中索引,也将退化为表锁。 InnoDB的细粒度锁,是实现在索引记录上的。 一,Inn...

张锦飞
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部