文档章节

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

卡特酋长
 卡特酋长
发布于 2016/12/06 00:01
字数 289
阅读 35
收藏 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 框架 栅格布局系统设计原理

Bootstrap 框架 栅格布局系统设计原理 如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩。事实上,这个布局系统提供了一套响应式的布局解决方案。 既然这么好用,那他是如何用CSS...

DemonsI
09/09
0
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

没有更多内容

加载失败,请刷新页面

加载更多

Cointext在阿根廷和土耳其推出比特币现金短信钱包

Cointext于10月15日开始在土耳其和阿根廷提供新的基于SMS的比特币现金钱包服务,这两个国家的加密货币使用量急剧上升,以应对严峻的经济形势。 移动钱包 通过短信处理BCH交易 “比特币是更好...

lpy411
22分钟前
1
0
大数据早课-0918

9.18日早课 1.全局搜索含有abc的文件名称或文件夹的命令 2.当前目录一般用什么表示 3.切换到上一次和上一层命令分别是什么 4.pwd是查看当前目录的什么 5.隐藏文件或文件夹的标识是什么? 怎样...

hnairdb
22分钟前
1
0
mybatis学习笔记一

一、mybaits需要的项目依赖 <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis --> <dependency> <groupId>org.mybatis</groupId> <artif......

wuyiyi
23分钟前
2
0
CentOS6 安装 GraphicsMagick

1.安装相关依赖: yum install -y gcc libpng libjpeg libpng-devel libjpeg-devel ghostscript libtiff libtiff-devel freetype freetype-devel 2.下载并解压到目录/usr/local/ wget ft......

凯文加内特
25分钟前
1
0
RabbitMq集群使用Nginx做负载均衡

1.配置rabbitmq集群(可以参考前一篇RabbitMq之部署集群) 2.Nginx做负载均衡 注意:Nginx1.90版本后 新增了stream 模块用于一般的 TCP 代理和负载均衡,之前版本不支持 修改Nginx配置文件ngi...

zhaochaochao
30分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部