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">
  • 相关阅读:
    4种方法教你如何截取JS字符串最后一位
    12种JS常用获取时间的方式
    拖动的模态框
    计算鼠标在盒子内的坐标
    offset与style的区别
    offset系列属性
    Words
    #一些真相# 和自己握手言和,不要期盼另一片荒岛可以让你变成陆地
    Stack为什么翻译成栈?- 根据字形来辨别容易混淆的堆和栈
    [Hardware] 机械硬盘和固态硬盘功耗对比
  • 原文地址:https://www.cnblogs.com/longly/p/6086643.html
Copyright © 2011-2022 走看看