bootstarap的提示信息和缩略图

最新推荐文章于 2021-02-28 19:55:08 发布

xdd_lmd

最新推荐文章于 2021-02-28 19:55:08 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/xdd_lmd/article/details/46582439

版权

bootstrap 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

提示信息

<div class="container">
        <h1 class="page-header">提示信息</h1>
        <div class="alert  alert-block">
            <!-- alert使用bootstrap的提示信息的样式
                 alert-block为提示信息添加边框 -->

        <!--关闭提示框样，需要添加插件bootstrap-alert.js  -->
        <a href="#" class="close" data-dismiss="alert">*</a>
            <h4>提示</h4>
            lob add absd you sadnfas adsfwe fdasfa asdfasdfdsfas adsfasdf asdf
        </div>
    </div>

这里写图片描述

缩略图

    <div class="container">
        <h1 class="page-header">缩略图</h1>
        <ul class="thumbnails">
        <!-- thumbnail:为小图标添加一些样式，比如:圆角效果 ，灰色边框，一些阴影效果-->
            <li class="span3"><a class="thumbnail" href="#"><img src="img/sn.jpg" width="260px" height="180px"/></a></li>
            <li class="span3"><a class="thumbnail" href="#"><img src="img/sn.jpg" width="260px" height="180px"/></a></li>
            <li class="span3"><a class="thumbnail" href="#"><img src="img/sn.jpg" width="260px" height="180px"/></a></li>
            <li class="span3"><a class="thumbnail" href="#"><img src="img/sn.jpg" width="260px" height="180px"/></a></li>

        </ul>
    </div>