第三天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中的循环 媒体查询的更多相关文章

  1. 从设计图到CSS:rem+viewport+媒体查询+Sass

    根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总结一下其中要点. rem rem是一种相对长度单位,参考的基准是<html>标签定义的 ...

  2. iPhone CSS media query(媒体查询)

    iPhone5  iPhone6  iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...

  3. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  4. Bootstrap3 栅格系统-媒体查询

    在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...

  5. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  6. CSS Media媒体查询使用大全,完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

  7. 详解css媒体查询

    简介 媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的 ...

  8. CSS中常用的字体单位:px、em、rem和%的区别

    在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...

  9. media queries 媒体查询使用

    media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...

随机推荐

  1. BZOJ2594 [Wc2006]水管局长数据加强版 【LCT维护最小生成树】

    题目 SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到一条从A至B的水管的 ...

  2. 如何用js让表格的行也能拖动

    行拖动的实现思路非常简单,选中一行,往上拖就与上面的行交换位置,往下拖就与下面的行交换位置.问题是如何得到交换行.我见过一个非常详细的教程,它会把表格里的每一行的高度与Y坐标计算出来,换言之,都时是比 ...

  3. Yii2.0 使用createcommand从数据库查询出来的int类型变成了string型

    在给客户端写接口文档时,会给每个返回的字段标上数据类型,客户端会根据标注的类型来解析数据,如果标注的类型错误,会导致客户端解析出错,造成崩溃. 一直以来我都是用的Yii进行项目的开发,之前使用Yii1 ...

  4. NGINX: 优化 use 参数

    转自:http://blog.sina.com.cn/s/blog_5eaf88f10100gkrq.html Nginx use参数分析对比 下图对比了poll select epoll和kqueu ...

  5. Cocos2D研究院之CCNode详解(三)

    http://www.xuanyusong.com/archives/950 上一章我们了解了cocos2d的项目路径以及工作原理,这次作者要真刀真枪地讲解代码了,咱们先来看看cocos2d最常用.也 ...

  6. C++笔试题目大全(笔试宝典)(不断完善中)

    1.new . delete . malloc . free 关系 delete 会调用对象的析构函数 , 和 new 对应 free 只会释放内存, new 调用构造函数. malloc 与 fre ...

  7. Yii操作数据库的3种方法

    一.执行原生太SQL的PDO方式. 复制代码代码如下: $sql = "";//原生态sql语句 xx::model()->dbConnection->createCo ...

  8. 解决:高版本jdk编译低版本代码时eclipse提示Access restriction:The type 'Unsafe' is not accessible due to restriction on required library

    在Eclipse中采用高版本jdk编译一些低版本的源码时,由于源码中使用了一些高版本中过时的API,可能就会报错,类似于: Access restriction:The type 'Unsafe' i ...

  9. inotify+rsync实现实时同步并邮件通知

    服务器之间文件实时同步,监控文件的变化,发送邮件通知,并实时同步文件. 由于人工同步多台服务器的文件比较吃力,可以借助这样一套软件,自动化的实现这样的工作. 并且可以事实监控变化发送邮件给系统管理人员 ...

  10. (5)C#运算符

    运算符 参照javase     (7)java基础知识-原码.反码.补码.运算符