boostrap学习小记-给网站加一个简单大方的banner吧

最近学习boostrap，发现很多boostrap网站都有看起来很大气的banner，结果分析了源码之后发现还是挺容易实现的。就试着做了一下。

原理很简单，在一个div.container外面加一个包裹div用于设置自己想要的背景，在div.container里面加加一些文字信息，如果需要在各种屏幕宽度下表现出不同的效果，我们还可以给它加上一些响应式的设置。具体操作过程如下：

本文的例子都运行在如下的boostrap基本环境里面：

那么我们首先确定其基本结构，上面说了基本需求，使用一个div.container为主要的内容存放块。在外面包裹一层用于设置背景的div块，在div.container里面放一些文本信息块，比如h1234，p，a之类的。

那么其基本结构如下：

几乎上面的每个块我都添加了类名，以便于设置样式。

我们先不考虑动态样式。

效果如下：

然后加入一点动态响应效果：

结果如下：

未调整大小时（屏幕宽度大于800px）：

调整宽度为600px到800px之间时：

然后加入一点动态响应效果：

调整宽度小于600px时：

我们可以发现，变化的主要是字体大小，如果需要改变其它的样式那么就可以根据具体需要自己设置即可，这里面需要注意到媒体查询的使用方法其中@media(max-width:800px)的关键字max-width意思是小于等于多少像素时要设置的样式，min-width反之亦然。

然后加入一点动态响应效果：