栅格 CSS中的循环 媒体查询
第三天Bootstrap
模态框
1.要使用模态框,需要现在body里,添加展示模态框的html代码。此时模态框是看不见的
2.如果要显示,$(“.modal”).modal(“show”);
3.如果要隐藏: $(“.modal”).modal(“hide”);
4.如果要调整模态框的大小,首先找到 .modal-dialog 这个div 给它添加 modal-lg(大尺寸) , modal-sm(小尺寸)属性,默认是中等尺寸
栅格的几个类
Bootstrap中把一个盒子分成了12份 给 类前缀 后面添加一个数字 用12/这个数字 得到的份数就是有用这个类前缀的盒子所占的份数
Eg: .col-xs-6 —— 那么有用这个类名的盒子就占了1/2;
———————————————————————————————————————
CSS中的循环语句
语句 :
@for $i from … to … { …. }
Eg: from 1 to 5 —— 相当于是 1 <= $i < 5
不包括5本身
用到 $i 这个参数时需要用到拼接
拼接的规则是 #{ $i }
———————————————————————————————————————
媒体查询
语法:
@media screen and ( 条件 ) and ( 条件 )….. {
内容
};
条件可以有多个,
Eg:
栅格 CSS中的循环 媒体查询的更多相关文章
- 从设计图到CSS:rem+viewport+媒体查询+Sass
根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总结一下其中要点. rem rem是一种相对长度单位,参考的基准是<html>标签定义的 ...
- iPhone CSS media query(媒体查询)
iPhone5 iPhone6 iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- Bootstrap3 栅格系统-媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- 详解css媒体查询
简介 媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的 ...
- CSS中常用的字体单位:px、em、rem和%的区别
在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
随机推荐
- 2017 多校4 Dirt Ratio
多校4 Dirt Ratio(二分+线段树) 题意: 给出n个数,找一段区间使得区间内不同数字个数除以区间长度最小,求这个最小值,\(n<=60000,a_i<=n\) 题解: 二分答案m ...
- BZOJ1823 [JSOI2010]满汉全席 【2-sat】
题目 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉全席,而能够烹饪出经过专家 ...
- 《c程序设计语言》-2.6~2.8
#include <stdio.h> unsigned setbits(unsigned x, int p, int n, unsigned y) { return (x & (( ...
- Avito Cool Challenge 2018:C. Colorful Bricks
C. Colorful Bricks 题目链接:https://codeforces.com/contest/1081/problem/C 题意: 有n个横向方块,一共有m种颜色,然后有k个方块的颜色 ...
- android Toolbox和BusyBox
在安卓系统中,Toolbox是能够实现内存的管理,备份管理和清除数据等功能的系统文件.用来对手机性能进行设置,需要root权限.能够被软件调用. 我们在updater-script文件中,知道有类似s ...
- 03 Java 修饰符
Java 修饰符主要分为两类: 访问修饰符 非访问修饰符 访问修饰符 public,对所有类可见 protected,对同一包内的类和子类可见 default,同一个包内的类可见 private,对当 ...
- bestcoder15_love
#include <iostream> #include <stdio.h> #include <string.h> #include <vector> ...
- 2016-2017 ACM-ICPC, Egyptian Collegiate Programming Contest(solved 8/11)
这套题似乎是省选前做的,一直没来写题解---补上补上>_< 链接:http://codeforces.com/gym/101147 一样先放上惨不忍睹的成绩好了--- Problem A ...
- 【git】Git 常用命令大全
Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势.
- js比对一维数组全等的算法
//辅助方法1,返回某个值在数组中的位置 Array.prototype.indexOf = function (e) { for (var i = 0, l = this.length; i < ...