Boostrap入门+样式学习--壹--
来源:互联网 发布:青少年使用网络调查 编辑:程序博客网 时间:2024/05/09 15:28
1. 自适应网页设计
首先,在网页代码的头部,加入一行 viewport元标签。viewport是网页默认的宽度和高度,
<meta name="viewport" content="width=device-width, initial-scale=1">
上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用 css3-mediaqueries.js。
2. 轮播组件 carousel
通过 javascript 初始化轮播组件,接受一个可选的object类型的options参数,并开始幻灯片循环。
$('.carousel').carousel({ interval: 2000 , //图片轮换的等待时间 //还有其他两种: pause 类型String 默认值是"hover" 鼠标放上去暂停轮播,离开开始轮播 //wrap 类型boolean 默认值是true 是否持续轮播});
直接放入参数值
.carousel(‘cycle’) 从左到右循环各帧。
.carousel(‘pause’) 停止轮播。
.carousel(number) 将轮播定位到指定的帧上(帧下标以0开始,类似数组)。
.carousel(‘prev’) 返回到上一帧。
.carousel(‘next’) 转到下一帧。
3. 响应式图片
<img src="..." class="img-responsive" alt="Responsive image">
通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%;和height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸。
4. 透明度设置:已经为 ie8兼容
.opacity(@opacity) { opacity: @opacity; // IE8 filter @opacity-ie: (@opacity * 100); filter: ~"alpha(opacity=@{opacity-ie})"; }
0 0
- Boostrap入门+样式学习--壹--
- Boostrap入门+样式学习--叁--
- Boostrap入门+样式学习--肆--
- Boostrap入门+样式学习--贰--(慕课网大漠《玩转bootstrap》[基础])
- boostrap里面的表格样式
- boostrap学习笔记2
- boostrap学习笔记
- Boostrap框架学习总结
- Boostrap学习笔记
- boostrap 对话框 学习
- Boostrap学习笔记
- boostrap需要的样式的地址
- Boostrap实现下拉框改变样式
- Boostrap
- boostrap
- Boostrap入门准备之border-box
- Boostrap 标准的远程弹出窗口页面样式
- hotcss的rem和boostrap、ionic自定义样式的冲突
- 九度 Online Judge 算法 刷题 题目1057:众数
- 关于linux的默认网关,双网卡不同网段
- poj解题报告——2960
- Legal or Not HDU杭电3342【拓扑排序】
- JPA学习笔记(5)——EntityManager相关
- Boostrap入门+样式学习--壹--
- hdu5386Cover六校(想法题)
- 换路定则
- 九度 Online Judge 算法 刷题 题目1058:反序输出
- [leetcode-136]Single Number(c)
- Leetcode -- Sort List
- 用 ES6 generator & Promise 写异步代码
- java1.8不能生成classes.dex
- hdu-5372 Segment Game(离散树状数组)(2015多校contest 7)