BootStrap入门学习笔记(一)

BootStrap环境安装

下载地址： http://getbootstrap.com/

BootStrap CSS概述

1. BootStrap使用了一些HTML5元素和CSS属性。因此，需要在项目的开头对HTML5进行声明`

2. 移动设备优先是自BootStrap3版本以来的一大改变，为了让BootStrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewport meta标签，如下所示：
   <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
   其中，width属性控制设备的宽度。上面的device-width的功能是自适应屏幕宽度；initial-scale=1.0确保网页加载时，以1：1的比例呈现，不会有任何的缩放。user-scalable=no禁用缩放功能，它通常搭配maximum-scale=1.0使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

3. 响应式图像<img src="" class="img-responsive">
   其中class="image-responsive"使得BootStrap3中的图像对响应式布局的支持更友好。其中class包含的属性如下：

.img-responsive{
display:block;
height:auto;
max-width:100%;
}

如果需要让.img-responsive类的图片水平居中，请使用.center-block类，而不是使用.text-center。

4. 全局显示、排版和链接
   基本的全局显示:

body{
margin:0; 
font-famliy:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #333333;
background-color: #ffffff;
}

排版：使用@font-family-base，@font-size-base，@line-height-base属性作为排版样式。
链接样式：通过属性 @link-color 设置全局链接的颜色。 对于链接的默认样式，如下设置：

a:hover,a:focus{	
  color:#2a6496;
  text-decoration:unnderline;
}
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

所以，当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为 #2a6496。同时，会呈现一条下划线。
除此之外，点击过的链接，会呈现一个颜色码为 #333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽，且对于基于 webkit 浏览器有一个 -webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2 像素。

5. 避免跨浏览器的不一致
   BootStrap使用Normalize.css来建立浏览器的一致性
6. 容器(由.container类来修饰)

.container{ 
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

7. BootStrap浏览器/设备支持