bootstrap使用中遇到的问题(二)
1.ie8不支持carousel组件,
解决方法:将jquery换为jquery1版本,具体原因不清楚~~~~~
2.ie8不支持background-color:rgba();
解决方法:这样写代码:
.carousel-indicators li{
width:24px;
height:24px;
margin-right:20px;
border-radius:24px;
background:rgba(255,255,255,.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);}
background:rgba(255,255,255,.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
rgba的含义,r代表red,g代表green,b代表blue,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba(255,255,255,0.1)就是透明度为0.1的白色。在现代浏览器中是支持rgba的。但是在ie8等古董级浏览器中是不支持的rgba的,ie8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色)。
大家注意,这个颜色“#19ffffff”是由两部分组成的。
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;都是白色。
到这里,rgba的用法就可以兼容IE8了。
3.col-?-push-X,col-?-pull-X的用法
简单来说,col-??-push-*和col-??-pull-*,主要起改变元素在大屏幕页面上的显示位置的作用,对于手持设备的小屏幕显示(也就是堆叠的列的顺序或者说位置),会严格按照html代码的先后顺序显示,那么我们自然就知道用法了:在html里面,把要先显示的内容写在前面,后显示的内容写在后面,然后用push和pull对它们在大屏幕上的左右位置进行调整,例子如下:
<div class=’col-12 col-sm-9 col-sm-push-3′>//这个div占了9个栅格,先写,让它在手持设备上可以先显示,然后用push往右推3个栅格,让它在大屏幕显示在右边。
<div class=’col-6 col-sm-3 col-sm-pull-9′> //这个div占了3个栅格,后写,让它在手持设备上后显示,然后用ull往左拉9个栅格,让它在大屏幕显示在左边。
就这么简单。通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。
提示:http://gsls.info/
http://www.cnblogs.com/linjiqin/p/3559800.html
4.bootstrap做网页不要轻易定div快的高度,因为bootstrap是移动端优先,若定义了高度,移动端会出现布局混乱,需用@media(){}来定义移动端的样式
bootstrap使用中遇到的问题(二)的更多相关文章
- Bootstrap框架的学习(二)
一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.boot ...
- bootstrap快速入门笔记(二)-栅格系统,响应式类
一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...
- bootstrap基础学习小记(二)排版、列表、代码风格、表格
排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta ...
- Bootstrap Metronic 学习记录(二)菜单栏
1.简介 1) .环境配置 2) .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...
- Bootstrap基本类和组件学习二
一.联系方式:(自带鼠标的移动动画) 1.头文件CSS <link rel="shortcut icon" href="favicon.ico"> ...
- BootStrap 智能表单系列 二 BootStrap支持的类型简介
代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html): <! ...
- 《深入理解Bootstrap》读书笔记(二)
列表 1.普通列表 普通列表的使用没有什么变化,只是在原本的基础上对margin和行间距做了一些调整. 2.有序列表 有序列表的使用也是没有什么变化,只是在原本的基础上对margin和行间距做了一些调 ...
- bootstrap使用中遇到的坑
一.例如: <div class="form-group"> <label class="control-label col-lg-3"> ...
- Bootstrap关于表单(二):水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...
随机推荐
- 涂抹Oracle笔记1-创建数据库及配置监听程序
一.安装ORACLE数据库软件及创建实例OLTP:online transaction processing 指那些短事务,高并发,读写频繁的数据库系统.--DB_BLOCK_SIZE通常设置较小.O ...
- EffectiveC#02--仅在对基类进行强制更新时才使用new修饰符
1.建议避免使用new修饰符来重新定义非虚函数. 非虚方法是静态绑定的,不管哪里的代码也不管在哪里引用, 它总是严格的调用类中所定义的函数.并不会在运行时在 派生类中查找不同的版本. 2.何时使用ne ...
- hbase权威指南学习笔记--架构--存储
HBase主要处理两种文件:预写日志(Write-Ahead Log,WAL),实际的数据文件. 一个基本的流程是客户端首先联系ZooKeeper子集群查找行健数据所在的region服务器名.(通过Z ...
- Visual Studio 2013 Web开发、新增功能:“Browser Link”
微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...
- java web移植 遇到Project facet Java version 1.7 is not supported
在移植eclipse项目时,如果遇到 "Project facet Java version 1.7 is not supported." 项目中的jdk1.7不支持.说明项目是其 ...
- 实战 Spring MVC接入支付宝即时到账 (部分代码)
下面就拿我项目中的部分代码来实践一下. 支付请求 首先,是提交表单 fund.jsp(这里我表单只需要用户填交易金额,其他的订单号之类的全部后台生成) <form id="deposi ...
- typecho博客出404页面修改方法
适用于typecho博客版本为:0.9 (13.12.12) typecho博客,很多时候可能安装完毕,除了首页,其他页面都是404=.= 在匹配*.php的location区域修改为以下格式: lo ...
- Knight Moves(BFS,走’日‘字)
Knight Moves Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- Azure File文件共享(6):使用Python开发
Azure文件共享服务提供了多种方式的访问接口,包括Powershell,.Net, Java, Python等等,本章主要介绍如何使用Python来访问Azure File存储. 关于Python环 ...
- js判断字符串中的英文和汉字
有时需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到.用 Javascript 判断通常有两种方法. 方法一 正则表达式,test()方法返回true 或 ...