标签:bootstrap

Bootstrap3优先移动设备,相关页面元素,如div等在页面缩小后,会变成列堆叠,自然就产生了哪些元素显示在前面,哪些元素显示在后面的问题。

问题依旧来自于做图书馆的网站,在某浏览具体内容的页面中,页面二八开,左边是分类导航之类的东西,右边是内容,当用户通过移动设备访问时,理所当然的是希望看到内容,而不是分类导航,那么该怎么样使得在手持设备上,内容可以先于分类导航显示呢?

======残忍的分割线======

当然,可以以一种残忍的做法,使用“hidden-xs”之类的属性隐藏左边的分类导航。

======结束残忍的分割线=====

草草google了一下,尚无明确的页面,于是看官网,有提到“通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序”,下面还有个简单的例子,咋一看不是很明白,于是测试了下,最终确定了用法,确实可以解决碰到的问题。

简单来说,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个栅格,让它在大屏幕显示在左边。

就这么简单。

必须得先赞一个Bootstrap,太解放程序猿了。

问题是这样的,Bootstrap3的js文件里面,集成了不少实用的js,其中就包括了图片轮播控件Carousel.js,但根据站点的文档,达到的效果是必须由用户先点击一次之后,才能循环播放图片,而不像其他轮播控件一样,页面一加载就播放。

于是google,在Github里面看到作者说解决了,但讲得不清楚,只说要加入data-ride=carousel,至于在哪加,却没说。再调整关键词找找,在搜索结果里面居然发现个中文的答案,网友12饕餮21已经解决了这一问题,和官方的说法一致,但给出的代码指出了data-ride=”carousel”属性应加在轮播控件命名ID的div中,例如:

<div id=”mycarousel” data-ride=”carousel” data-interval=”2000″>

记录一下,同时膜拜一下12饕餮21。