Bootstrap学习记录【7】【缩略图和面板】

最新推荐文章于 2022-05-24 20:57:11 发布

小小2017

最新推荐文章于 2022-05-24 20:57:11 发布

阅读量111

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_41670382/article/details/114372731

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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>