BS/CSS学习笔记

<nav> 标签定义导航链接的部分。
并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。
在不同设备上（手机或者PC）可以制定导航链接是否显示，
以适应不同屏幕的需求。
为了向导航栏添加链接，只需要简单地添加带有 
class .nav、.navbar-nav 的无序列表即可
glyphicona ->字体图标
Bootstrap 超大屏幕（Jumbotron）
除了更大的<h1>,字体粗细font-weight被减为200.


使用 max-width 属性
如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：
背景图片
背景图片可以响应调整大小或缩放。
以下是三个不同的方法：
1. 如果 background-size 属性设置为 "contain", 
背景图片将按比例自适应内容区域。
图片保持其比例不变：
2.如果 background-size 属性设置为 "100% 100%" ，
背景图片将延展覆盖整个区域：background-size:100% 100%;
3. 如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，
以使背景图像完全覆盖背景区域。
注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。


↓↓↓响应式


你可以使用媒体查询的 min-device-width 替代 min-width 属性，
它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。
/* 设备小于 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}


/* 设备大于 400px (也等于): */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}