Home > Web Front-end > JS Tutorial > Detailed explanation of Bootstrap's four image styles_javascript skills

Detailed explanation of Bootstrap's four image styles_javascript skills

WBOY
Release: 2016-05-16 15:22:15
Original
974 people have browsed it

In this chapter, we will learn about Bootstrap’s support for images. Bootstrap provides four classes that can apply simple styles to images, namely:

img-rounded adds border-radius:6px to get image rounded corners
img-circle Add border-radius:50% to make the entire image circular
img-thumbnail adds some padding and a gray border
img-responsive image responsive

1. img-rounded

<!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> 
Copy after login

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

Effect:

2. img-circle

<body style="padding: 20px;"> 
  <div class = "container"> 
    <img src = "5.jpg" class="img-circle" >    
  </div> 
</body> 
Copy after login

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

Effect (because the width and height of this image are different, it will appear as an ellipse. If the width and height are set to the same, a circle will appear):

3. img-thumbnail

<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>
Copy after login

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

Effect:

4. img-responsize

<body style="padding: 20px;"> 
  <div class = "container" style = "width:150px;"> 
    <img src = "5.jpg" class="img-responsive" width="400px" >    
  </div> 
</body> 
Copy after login

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

Effect (width attribute value in img is ignored):


The above content introduces you to the relevant knowledge of Bootstrap’s four image styles step by step. I hope you like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template