zoukankan      html  css  js  c++  java
  • Bootstrap-全局CSS样式-图片样式

    Bootstrap第二部分:全局CSS样式-图片样式
    .img-rounded   圆角图片
    .img-circle    圆形图片
    .img-thumbnail 缩略图片
    .img-responsive响应式图片

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4     <meta charset="utf-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6     <meta name="viewport" content="width=device-width, initial-scale=1">
     7     <title>Bootstrap 101 Template</title>
     8 
     9     <!-- Bootstrap -->
    10     <link href="css/bootstrap.css" rel="stylesheet">
    11 
    12     <!--[if lt IE 9]>
    13     <script src="js/html5shiv.min.js"></script>
    14     <script src="js/respond.min.js"></script>
    15     <![endif]-->
    16 </head>
    17 <body>
    18 <h3>圆角图片</h3><!--这个效果是在IE8以下是实现不出来的-->
    19 <img src="img/1.jpg" class="img-rounded">
    20 <img src="img/2.jpg" class="img-rounded">
    21 <img src="img/3.jpg" class="img-rounded">
    22 <img src="img/4.jpg" class="img-rounded">
    23 
    24 <h3>圆形图片</h3>
    25 <img src="img/1.jpg" class="img-circle">
    26 <img src="img/2.jpg" class="img-circle">
    27 <img src="img/3.jpg" class="img-circle">
    28 <img src="img/4.jpg" class="img-circle">
    29 
    30 <h3>以下是缩略图</h3>
    31 <img src="img/1.jpg" class="img-thumbnail">
    32 <img src="img/2.jpg" class="img-thumbnail">
    33 <img src="img/3.jpg" class="img-thumbnail">
    34 <img src="img/4.jpg" class="img-thumbnail">
    35 <h3>响应式图片</h3>
    36 <img src="img/1.jpg" class="img-responsive">
    37 <img src="img/2.jpg" class="img-responsive">
    38 <img src="img/3.jpg" class="img-responsive">
    39 <img src="img/4.jpg" class="img-responsive">
  • 相关阅读:
    容器字段FieldContainer
    时间选择框
    Java 异常处理的优劣
    RSA 公钥加密算法
    Java 添加播放MIDI音乐
    Java 内存查看与分析
    总结 Eclipse 编程常用的快捷键
    Java 基础【03】序列化和反序列化
    找出给定字符串中出现最多的字符和次数
    Javascript 限制文本字节数
  • 原文地址:https://www.cnblogs.com/longly/p/6086643.html
Copyright © 2011-2022 走看看