【个人】Bootstrap知识点补充

来源：互联网发布：软件工程技术的应用编辑：程序博客网时间：2024/06/05 08:15

.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。有背景色，有边框。

blockquote {    padding: 10px 20px;    margin: 0 0 20px;    font-size: 17.5px;    border-left: 5px solid #eee}blockquote .small:before,blockquote footer:before,blockquote small:before {    content: '\2014 \00A0'}

blockquote也是一个稍微缩小了一点的容器；第二个类是一个小横线。

0 0