.image-fluid:响应式大小

.image-thumbnails:照片四周会出现一个1px宽的边框

.figure:用于<figure>标签,用来标记一个图像

.figure-caption:标签的标题,用于<figcaption>标签

基本用法:

<figure class="figure">
<img src="..." class="figure-img img-fluid " alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

image 样式设置的更多相关文章

  1. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  2. placeholder的样式设置

    在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...

  3. Asp.Net中应用Aspose.Cells输出报表到Excel 及样式设置

    解决思路: 1.找个可用的Aspose.Cells(有钱还是买个正版吧,谁开发个东西也不容易): 2.在.Net方案中引用此Cells: 3.写个函数ToExcel(传递一个DataTable),可以 ...

  4. 导出Excel之Epplus使用教程2(样式设置)

    导出Excel之Epplus使用教程1(基本介绍) 导出Excel之Epplus使用教程2(样式设置) 导出Excel之Epplus使用教程3(图表设置) 导出Excel之Epplus使用教程4(其他 ...

  5. PowerDesigner的样式设置

    原文:PowerDesigner的样式设置 PD提供了强大的配置功能,可以对生成的数据库对象命名.数据模型的展现进行设置.这里首先讲下样式的设置. 颜色和字体设置 1.单独设置某个对象的颜色和字体 1 ...

  6. POI Excel导出样式设置

    HSSFSheet sheet = workbook.createSheet("sheetName");    //创建sheet sheet.setVerticallyCente ...

  7. QListWidget与QTableWidget的使用以及样式设置

    QListWidget和QTableWidget的使用和属性,QTableWidget和QListWidget样式表的设置,滚动条的样式设置 一.QListWidget的使用 //一.QListWid ...

  8. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

  9. SVG基本形状及样式设置

    前面的话 图形分为位图和矢量图.位图是基于颜色的描述,是由像素点组成的图像:而矢量图是基于数学矢量的描述,是由几何图元组成的图像,与分辨率无关.可缩放矢量图形,即SVG,是W3C XML的分支语言之一 ...

  10. WPF DataGrid 样式设置

    隔行换色,鼠标单击,悬浮样式都有,其具体效果如图 1 所示. 图 1 WPF DataGrid 样式设置效果图 其中: 界面设计代码下所示 ? + 查看代码 1 2 3 4 5 6 7 8 9 10 ...

随机推荐

  1. docker devicemapper 问题

    DOCKER_OPTS= "--storage-driver=devicemapper  --storage-opt  dm.basesize=50G --storage-opt dm.da ...

  2. centos限制远程尝试密码次数

    CentOS中有一个pam_tally2.so的PAM模块,来限定用户的登录失败次数,如果次数达到设置的阈值,则锁定用户.编译PAM的配置文件 # vim /etc/pam.d/login添加: au ...

  3. C. Greedy Arkady

    kk people want to split nn candies between them. Each candy should be given to exactly one of them o ...

  4. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

  5. [Usaco2009 Feb]Revamping Trails 道路升级 BZOJ1579

    分析: 比较裸的分层图最短路,我的实现方式是,每次求出1所有节点的最短路,之后用每一个节点更新与其相连的节点(取较小值),之后做K次,就求出了分层图的最短路了. 附上代码: #include < ...

  6. Spark SQL -- Hive

    使用Saprk SQL 操作Hive的数据 前提准备: 1.启动Hdfs,hive的数据存储在hdfs中; 2.启动hive -service metastore,元数据存储在远端,可以远程访问; 3 ...

  7. 【LeetCode92】Reverse Linked List II★★

    题目描述: 解题思路: 题目大意:给定一个链表,反转第m到第n个结点部分,m.n满足1 ≤ m ≤ n ≤ length of list. 解题思路参照LeetCode206题,用迭代法,不过要注意以 ...

  8. linux下使用软连接之案例二

           在笔者的上一篇文章介绍过怎么通过linux的软连接在不修改上传代码的情况下,将上传到项目路径下的图片改为上传到项目外面,防止重新部署后图片被删除了.同时还可以直接通过类似访问静态资源的方 ...

  9. POJ3267

    从今天开始POJ里的一部分类型的题目就一般不放在一起写了 一个是太丑,格式麻烦,第二个是以后的题目难度都有所增大,因此一道题可能就要写蛮长 尤其是DP这一块,以前一直没好好学习,现在从基础的先开始吧 ...

  10. Luogu T24242 购物券Ⅰ(数据已加强)

    这是一道比赛时的题目,但由于我没报名,所以浪费了一个大好的切水题的机会. 是经典的meet in middle(折半搜索)的模板题,但是之前一直没找到这种题目,今天终于看到了. 由于m的范围极大,因此 ...