Bootstrap 学习

说明：案例源自慕课网的学习。

 

关键字：响应式布局、class、component！

 

什么是响应式布局？

这就得从移动大军崛起之后说起，本来只为PC端浏览器设计的网站在移动端的体验太过恶劣。而且，因为移动端尺寸五花八门，如何适配移动端的浏览器成了一个难题。

好在有了css3-media query，这里不解释它是什么（其实我也不知道），举个例子就明白了。

要求：当浏览器的宽度小于800px的时候，背景色设为红色；其他时候设为蓝色。

实现：

link.css

body {
    background: red
}

demo.html

<html>

<head>
    <!--外联样式-->
    <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:800px)" />

    <style>
        @media screen and (min-width: 800px) {
            body {
                background: blue;
            }
        }
    </style>
</head>

<body>
</body>
</html>

 

现在，使用浏览器打开这个页面，试着改变浏览器的宽度，发现完全满足要求。

 

也许你会问，我们使用js或者css-media query能实现的功能，为什么还需要bootstrap？

这是因为bootstrap等框架为我们提供了一整套的解决方案，例如形状、配色，甚至组件、动作（事件），这样我们直接拿来使用即可，不必自己费心劳力的去一一寻找、调整。

-- 当然了，如果你是高手，又有足够的经验，喜欢将细节一一掌控，又或者喜欢精简的东西，那也是可以用来参考的啊。

 

 

>>>>>>>未完待续

posted on 2017-03-29 22:33  LarryZeal  阅读(183)  评论(0)  编辑  收藏  举报

导航