初识Bootstrap v3响应式

Bootstrap前端必学入门响应式框架。如今已经推出V4版本。

何为响应式,就是在不同分辨率,情况下CSS显示不同的样式。

在head中添加如下,移动设备优先。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

在CSS添加如下,在宽度小于768px下使用的CSS样式。当然一般情况框架的上面都帮你写好了。
可能在某些移动端的时候可能会出现一些怪样子。所以要微调下。就在下面中添加。

1
2
3
@media (max-width: 768px) {

}

然后就是各种class标签对应的显示响应式样式了。
随便举个例子:
如下class="nav nav-pills">。nav就是导航,nav-pills为导航栏样式。
当然导航栏有很多样式的。

1
2
3
4
5
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>

我自己些了一个,可以看看啊。肯UI不是太好但是该有的都有
添加个小功能用jquery添加个点击导航栏跳转所有到对应的标签页。

旅游纪念
仿一加官网