Bootstrap 3.3.7学习笔记2

Bootstrap 3.3.7学习笔记2

接下来要初步看一下bootstrap里面css的格式
首先从最简单的<h1>到<h6>开始，下面就是从bootstrap.css中粘贴出来的。

h1 {
  margin: .67em 0;
  font-size: 2em;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #777;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
  font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
  font-size: 75%;
}
h1,
.h1 {
  font-size: 36px;
}
h2,
.h2 {
  font-size: 30px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 18px;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}

知识点：
1. .h1,.h2到.h6是bootstrap自定义的6个类，只要使用这六个类就可以让所处的div看上去和标题一模一样,包括small所表示的副标题！
2. font-weight 属性设置文本的粗细。

Value	Description
normal	默认值。
bold	粗体
bolder	超粗
lighter	微细
100～900的整百数，包括100与900	400等于normal，700等于bold
inherit	从父元素继承

3. small 里头的字体大小都是根据父元素的百分比定的，而正式的h1到h6都有规定的以px为单位的大小。
4. small的颜色是规定的，而h1它们是继承的。
5. small的行高是1，h1它们的行高是1.1。
6. h1到h3是同一个margin格式，h4到h6是另一个，可想而知h4它们的margin要小一点，因为本来字就这么咪咪点了。
7. 有疑问的是在最开头给h1定义了以em为单位的margin和font-size，这是为何？觉得h1用的多？所以才需要在margin和字体大小上考虑父元素的情况？
第二个要学习的是body

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

知识点：
1. line-height: 1.42857143; 实际上就是让行高保持为20px
2. 在body里面的属性都是会被html里bady中的元素继承的！所以这算是给bootstrap的正文部分定了基调。这个首选的”Helvetica Neue”字体长成这样，貌似很正式的腔调。

所以总结一下这点内容里面目前对我来说最有意思的就是，bootstrap刻意仿照h1到h6做了6个class：.h1 .h2 .h3 .h4 .h5 .h6