Boostrap入门+样式学习--壹--

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([email protected]{opacity-ie})";
    }

版权声明：本文为博主原创文章，谢谢参考！有问题的地方，欢迎纠正，一起进步。