【个人】Bootstrap知识点补充-蒲公英云

【个人】Bootstrap知识点补充

你的名字 2022-09-29 01:58 243阅读 0赞

.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' }