zoukankan      html  css  js  c++  java
  • 详解Bootstrap四种图片样式


    本文给大家介绍Bootstrap 对图片的支持,Bootstrap提供了四个可对图片应用简单样式的class,对Bootstrap四种图片class相关知识感兴趣的朋友一起学习吧
     

    在本章中,我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class,分别是:

    img-rounded 添加 border-radius:6px 来获得图片圆角
    img-circle 添加 border-radius:50% 来让整个图片变成圆形
    img-thumbnail 添加一些内边距(padding)和一个灰色的边框
    img-responsive 图片响应式

    1、img-rounded

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!doctype html>
    <html lang="en">
    <head>
      <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="Keywords" content="关键词一,关键词二">
      <meta name="Description" content="网站描述内容">
      <meta name="Author" content="Yvette Lau">
      <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
      <title>BootstrapDemo</title>
      <!--css js 文件的引入-->
      <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
    </head>
      <body style="padding: 20px;">
        <div class = "container">
          <img src = "5.jpg" class="img-rounded" >   
        </div>
      </body>
    </html>

    .img-rounded{border-radius:6px;}

    效果:

    2、img-circle

    1
    2
    3
    4
    5
    <body style="padding: 20px;">
      <div class = "container">
        <img src = "5.jpg" class="img-circle" >   
      </div>
    </body>

    .img-circle{border-radius:50%;}

    效果(因为本图片的宽高大小不同,所以呈现出椭圆,如果将width和height设置相同,那么会呈现出一个圆):

    3、img-thumbnail

    1
    2
    3
    4
    5
    6
    7
    <body style="padding: 20px;">
      <div class = "container">
        <img src = "5.jpg" class="img-thumbnail"
        <img src = "4.jpg" class="img-thumbnail"
        <img src = "3.jpg" class="img-thumbnail"
      </div>
    </body>

    .img-thumbnail{display:inline-block;max-100%;height:auto;padding:4px;line-height:1.42857143;
                      border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}

    效果:

    4、img-responsize

    1
    2
    3
    4
    5
    <body style="padding: 20px;">
      <div class = "container" style = "150px;">
        <img src = "5.jpg" class="img-responsive" width="400px" >   
      </div>
    </body>

    .img-responsive{display:block;max-100%;height:auto;}

    效果(img中的width属性值被忽略):

    以上内容分步骤给大家介绍了Bootstrap四种图片样式的相关知识,希望大家喜欢。

  • 相关阅读:
    Leetcode Plus One
    Leetcode Swap Nodes in Pairs
    Leetcode Remove Nth Node From End of List
    leetcode Remove Duplicates from Sorted Array
    leetcode Remove Element
    leetcode Container With Most Water
    leetcode String to Integer (atoi)
    leetcode Palindrome Number
    leetcode Roman to Integer
    leetcode ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/sanshao221/p/6530205.html
Copyright © 2011-2022 走看看