网格系统-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() ...
随机推荐
- galera mariadb集群恢复策略
1 galera mariadb首先MariaDB是一个数据库,可以看成是MySQL的一个分支,由于MySQL被SUN收购,所以MySQL面临着闭源的风险,当时MySQL之父Widenius并没有加入 ...
- python decorator的本质
推荐查看博客:python的修饰器 对于Python的这个@注解语法糖- Syntactic Sugar 来说,当你在用某个@decorator来修饰某个函数func时,如下所示: @decorato ...
- 【洛谷】【lca+树上差分】P3258 [JLOI2014]松鼠的新家
[题目描述:] 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n(2 ≤ n ≤ 300000)个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真 ...
- django下载excel,使用django-excel插件
django下载Excel,使用django-excel插件 由于目前的资料多是使用pandas或xlwt库实现的.其实没有那么的麻烦,因为django有相对应的插件django-excel. 该插件 ...
- luogu P2617 Dynamic Rankings(主席树)
嘟嘟嘟 一句话题意:带修改区间第\(k\)小. 不修改都会,主席树板子.但是有修改就要比较深入的理解主席树了. 众所周知,主席树中以\(i\)为根的线段树维护的是\([1, i]\)这个前缀的权值,因 ...
- 一个简单的统计问题(解决方案:Trie树)
题目如图 输入几个不重复的单词和几个前缀,分别统计出单词中包含前缀的个数. Trie树 这个题目用到了 Trie 树.它在百度百科中的定义如下:在计算机科学中,Trie,又称字典树.单词查找树 ...
- Apache AB的安装和使用(Ubuntu16.04)
步骤很简单一共两步,安装一步,使用一步. sudo apt-get install apache2-utils ab -n 10000 -c 100 https://www.baidu.com/ 注意 ...
- 使用ROS节点——Node & Master——roscore、rosrun、rosnode
1.Node 在ROS的世界里, 最小的进程单元就是节点( node) . 一个软件包里可以有多个可执行文件, 可执行文件在运行之后就成了一个进程(process), 这个进程在ROS中就叫做节点. ...
- 配虚拟ip脚本
cat /home/master/init_pandora.sh #! /bin/shuser=`whoami`if [ $user = 'master' ]then sudo /sbin/ifcon ...
- html5复习--canvas
一.简介 <canvas>是html5新增的标签,可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至 ...