Bootstrap学习记录【7】
1.缩略图
.thumbnail
配合网格系统使用！
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail"> <img src="img/bg1.jpg" alt="...">
<h3>雪山</h3>
<p>好看！！！</p>
<a class="btn btn-info" href="#">点击就看</a> </div>
</div>
</div>
</div>
</body>
2.面板
.panel
.panel-default
：默认样式
.panel-heading
：面板头
.panel-body
：面板主体内容
<div class="container">
<div class="panel panel-success">
<div class="panel-heading">
缩略图
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<div class="thumbnail"> <img src="img/bg1.jpg" alt="...">
<h3>雪山</h3>
<p>好看！！！</p>
<a class="btn btn-info" href="#">点击就看</a> </div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="img/bg1.jpg" alt="...">
<h3>雪山</h3>
<p>好看！！！</p>
<a class="btn btn-info" href="#">点击就看</a> </div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="img/bg1.jpg" alt="...">
<h3>雪山</h3>
<p>好看！！！</p>
<a class="btn btn-info" href="#">点击就看</a> </div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="img/bg1.jpg" alt="...">
<h3>雪山</h3>
<p>好看！！！</p>
<a class="btn btn-info" href="#">点击就看</a> </div>
</div>
</div>
</div>
</div>
</div>
学习来源：
https://www.bilibili.com/video/BV1Pz4y1k7g5?from=search&seid=12895899452417695000
学习进度：105