网格系统-bootStrap4常用CSS笔记
.row | 定义一行 |
.col | 均分列数,最多一行12列。每列左右间隙各15px |
.col-{1到12} | 定义在所有屏幕下的列宽 |
.col-{sm|md|lg|xl}-{1到12} | 定义在指定屏幕下该列占据的列宽,sm:屏幕>=576px、md:屏幕>=720px、lg:屏幕>=960px、xl:屏幕>=1200px |
.offset-{1到11} | 在所有屏幕下的列偏移 |
.offset-{sm|md|lg|xl}-{1到11} | 在指定屏幕下的列偏移 |
代码一:在所有尺寸屏幕下,均分三列 <div class="row"> 代码二:在所有尺寸屏幕下,第一列占据50%,第二列占据25%,第三列占据25% <div class="row"> 代码三:在屏幕宽度>=960像素时,第一列占据50%,第二列占据10%,第三列占据25%,小于960像素的屏幕下,每列占据100%宽度 <div class="row"> 代码四:列1在所有屏幕尺寸下均向右偏移1个单元列的宽度。列2只在屏幕宽度>=960像素 时向右偏移1个单元列的宽度 <div class="row">
|
网格系统-bootStrap4常用CSS笔记的更多相关文章
- 文字排版 - bootStrap4常用CSS笔记
[文字常用标签] <h1>.<h2>.<h3>.<h4>.<h5>.<h6> 标题类标签,h1字体最大以次类推 <sm ...
- 信息提示 - bootStrap4常用CSS笔记
.alert 基类 .alert-{success.info.warning.danger.primary.secondary.light.dark} 各种类型的配色样式 .fade..show 设置 ...
- 容器类 - bootStrap4常用CSS笔记
.container 居中容器类,最大宽度默认为1200px.左右间隙15px .container-fluid 全屏容器类. .jumbotron 创建一个大的灰色的圆角背景框 .jumbotron ...
- 图形 - bootStrap4常用CSS笔记
.rounded 图片显示圆角效果 .rounded-circle 设置椭圆形图片 .img-thumbnail 设置图片缩略图(图片有边框) .img-fluid 响应式图片 .float-righ ...
- 表格 - bootStrap4常用CSS笔记
[表格标签] <table> 定义一个表格 <thead> 表格表头 <tbody> 表格主体内容 <tr> 行 <th> 表头列 &l ...
- 背景颜色 - bootStrap4常用CSS笔记
.bg-primary 重要的背景颜色 .bg-success 执行成功背景颜色 .bg-info 信息提示背景颜色 .bg-warning 警告背景颜色 .bg-danger 危险背景颜色 .bg- ...
- CSS笔记之Grid网格系统
Grid布局已经不是新鲜的技术了,但一直都是使用了Flex布局,如今需要了边学习边做些常用的笔记.首先grid和flex一样都不支持IE10以下的浏览器 基本布局: 一般是所有子元素都横向排列或者都纵 ...
- discuz内置常用CSS代码分析
CSS多IE下兼容HACK写法 所有 IE浏览器适用:.ie_all .foo { ... } IE6 专用:.ie6 .foo { ... } IE7 专用:.ie7 .foo { ... } IE ...
- 获取jQuery对象的第N个DOM元素 && table常用css样式
获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...
随机推荐
- python第十九课——random模块中的常用函数
1.random():返回一个[0,1)的随机浮点数(双精度浮点数) 2.uniform(a,b): 返回[a,b]之间的一个随机浮点数(双精度浮点数) [注意]a和b接受的数据大小随意 例如:3.r ...
- PHP中include和require
1.include语句 使用include语句可以告诉PHP提取特定的文件,并载入它的全部内容 1 <?php 2 inlude "fileinfo.php"; 3 4 // ...
- Java多线程和并发基础面试总结
多线程和并发问题是Java技术面试中面试官比较喜欢问的问题之一.在这里,从面试的角度列出了大部分重要的问题,但是你仍然应该牢固的掌握Java多线程基础知识来对应日后碰到的问题.收藏起来,希望给予即将找 ...
- 联通营业厅API 获取个人信息
string newValue = base.Request["tel"]; string newValue2 = base.Request["pwd"]; s ...
- 关于vmware workstation10常见问题
简单的说明:win7和win10的解决办法都是这个,都可以用这个解决. 这是一个共性的问题. 出现这个问题的原因是: a.要么是系统更新没有及时正确的关闭虚拟机导致的; b.没有及时将虚拟机手动关闭再 ...
- CentOS中配置VNC Server
环境:CentOS 6.4 1.安装tigervnc-server及相关软件 首先检查系统中是否安装tigervnc-server安装包 rpm -qa tigervnc-server 如果没有就直接 ...
- openstack self-service 实例 连接外网数据表流程
我的openstack的架构是最简单的controller-compute架构,在provider基础上创建self-service self-service的实例上外网的流量走向 登陆实例,pin ...
- FFmpeg中几个结构体的意义
AVCodec是存储编解码器信息的结构体,特指一个特定的解码器,比如H264编码器的名字,ID,支持的视频格式,支持的采样率等: AVCodecContext是一个描述编解码器采用的具体参数,比如采用 ...
- windows内核Api的学习
windows内核api就是ntoskrnl.exe导出的函数.我们能够跟调用应用层的api一样,调用内核api. 只是内核api须要注意的是.假设函数导出了.而且函数文档化(也就是能够直接在msdn ...
- undefined reference to `sqrt'的问题
主要问题是math.h这个头文件虽然在/lib/include 下有定义,但是该文件内并没有sqrt()的定义.解决的办法是:在编译的时候在后面加上-lm,意思是链接到math函数库. 在gcc下用到 ...