Bootstrap学习知识点补充

Bootstrap学习知识点补充。

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

@media (min-width:768px) {.container {width: 750px}}

@media (min-width:992px) {.container {width: 970px}}

@media (min-width:1200px) {.container {width: 1170px}}

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

container居中，在大分辨率显示器上显示最大为1200px。

.jumbotron {padding-top: 30px;padding-bottom: 30px;margin-bottom: 30px;color: inherit;background-color: #eee}

.jumbotron .h1,.jumbotron h1 {color: inherit}

.jumbotron p {margin-bottom: 15px;font-size: 21px;font-weight: 200}

.jumbotron>hr {border-top-color: #d5d5d5}

.container .jumbotron,.container-fluid .jumbotron {padding-right: 15px;padding-left: 15px;border-radius: 6px}

.jumbotron .container {max-width: 100%}

@media screen and (min-width:768px) {
    .jumbotron {padding-top: 48px;padding-bottom: 48px}
    .container .jumbotron,.container-fluid .jumbotron {padding-right: 60px;padding-left: 60px}
    .jumbotron .h1,.jumbotron h1 {font-size: 63px}}

jumbotron类，在父级的大小范围上缩小了，而且有背景色#eee，在container下面的话有圆角。算是个容器吧，在container下面左右缩小了60px的padding。

.thumbnail {display: block;padding: 4px;margin-bottom: 20px;line-height: 1.42857143;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;-webkit-transition: border .2s ease-in-out;-o-transition: border .2s ease-in-out;transition: border .2s ease-in-out}

.thumbnail a>img,.thumbnail>img {margin-right: auto;margin-left: auto}

a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover {border-color: #337ab7}

.thumbnail .caption {padding: 9px;color: #333}

thumbnail类，也类似一个容器，在父级的大小范围上缩小了4px的padding。有背景色，有边框。