Bootstrap的栅格化系统
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--添加视口meta实现布局的自动适应-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--引入bootstrap样式文件-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--引入jq（必须在bootstrap.min.js文件之前）-->
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
<!--引入bootstrap js-->
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<title>Bootstrap学习</title>
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 40px;color: white">
<div class="col-xs-3 col-lg-3" style="padding-top:20px;height:240px;background-color: #1b6d85">
苏苏是一痴心的女子，
象一朵野蔷薇，她的丰姿；
象一朵野蔷薇，她的丰姿
来一阵暴风雨，摧残了她的身世。
</div>
<div class="col-xs-3 col-lg-3" style="padding-top:20px;height:240px;background-color:grey">
苏苏是一痴心的女子，
象一朵野蔷薇，她的丰姿；
象一朵野蔷薇，她的丰姿
来一阵暴风雨，摧残了她的身世。
</div>
<div class="col-xs-3 col-lg-6" style="padding-top:20px;height:240px;background-color:darkred">
这荒草地里有她的墓碑
淹没在蔓草里，她的伤悲；
淹没在蔓草里，她的伤悲——
啊，这荒土里化生了血染的蔷薇！
</div>
<div class="col-xs-3 col-lg-3" style="padding-top:20px;height:240px;background-color:blueviolet">
那蔷薇是痴心女的灵魂，
在清早上受清露的滋润，
到黄昏里有晚风来温存，
更有那长夜的慰安，看星斗纵横。
</div>
</div>
</div>
</body>
</html>
@media (min-width: 1200px)
.container {width: 1170px;
}
@media (min-width: 992px)
.container {width: 970px;
}
@media (min-width: 768px)
.container {width: 750px;
}
| 视口大小 | 超小屏幕 手机(<768px) | 小屏幕 平板(>=768px) | 中等屏幕 桌面显示器(>=992px) | 大屏幕 桌面显示器(>=1200px) |
| 类前缀 | .col-xs-* | .col-sm-* | .col-md-* | col-lg-* |
Bootstrap的栅格化系统相关推荐
- 栅格化系统的原理以及实现
更多技术文章 什么是栅格化 在一个有限的.固定的平面上,用水平线和垂直线(虚拟的线,"参考线"),将平面划分成有规律的一系列"格子"(虚拟的格子),并依托这些格 ...
- bootstrap解析-栅格系统
.container(布局容器) 屏幕宽1200px以上(col-lg) 1. 默认width为1170px 2. padding,lefet和right各为15px,所以内容width为1140px ...
- 一文带你马上清楚bootstrap的栅格系统
bootstrap的栅格系统 我们都知道bootstrap的栅格系统是为了实现网站的响应式布局,但bootstrap提供了一套响应式.移动设备优先的流式栅格系统,它会将网页分为12等价(宽度),举个例 ...
- Bootstrap 默认栅格系统
Bootstrap的默认栅格系统为固定宽度布局,宽度为940px,共包含12列,每列的宽度为 60px,列间隙为 20px.如图 2‑1所示: 图2-1 Bootstrap默认栅格系统 HTML代码 ...
- 基于SSM+SpringBoot+MySQL+Thymelaf+Bootstrap的个人理财系统
项目运行截图 个人登录 个人页面 零钱理财 工资理财 期限理财 基金理财 银行推荐 银行推荐 资金记录 安全网贷 我的理财 我的借贷 技术描述 开发工具: Idea/Eclipse 数据库: mysq ...
- html栅格系统格式,Bootstrap的栅格系统是什么？栅格系统详解
本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统.栅格参数是什么,列偏移.列嵌套怎么设置.有一定的参考价值,有需要的朋友可以参考一下,希望对你 ...
- Bootstrap之栅格系统偏移
Bootstrap之栅格系统偏移 Bootstrap之栅格系统偏移: 在Bootstrap中可能会使用到offset(偏移),具体语法格式如下: <div class="col-md- ...
- 深入理解BootStrap Item7 -- 栅格系统（布局）
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
- 【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页
文章目录 1.bootstrap基本模板:meta/title,link/script 2.两种布局容器/栅格系统:自动补 3.样式_表格/按钮/图片/表单:class属性,for属性联动 4.组件_ ...
最新文章
- mysql账号管理系统_简单账号管理系统的实现（b/s、servlet、html、mysql）
- 如何做好技术Team Leader
- Java中的super的使用
- 机器学习-吴恩达-笔记-4-神经网络描述
- Java程序猿必须掌握的重点之一：Lock锁
- 用 JNI 进行 Java 编程(1)
- 如何创建自己的本地高级URL缩短服务
- 进销存源码|ERP多仓库管理系统全开源php源码
- 可以搜python题答案的app-可以搜Python题答案的APP有哪些？
- matlab中变量的命名规则
- java实现调用打印机
- matlab 2014b 图像,使用Matlab 2014b的锯齿状轮廓
- matplotlib中文显示以及设置图片大小
- linux下监测cpu温度,linux下CPU温度监测
- 使用face-api实现html前端摄像头人脸检测
- css雪碧图动画,CSS3动画——雪碧图的实现
- 职业选手cfg文件怎么用_新版本盗贼怎么玩？职业选手来教你！
- golang与面向接口编程
- 32 回归分析——一元线性回归模型
- stm32——EXTI