Bootstrap 图片
Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：
请看下面的实例演示：
<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 图像</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body><img src="/wp-content/uploads/2014/06/download.png" class="img-rounded" alt="Bootstrap学习（3）_html/css_WEB-ITnose" ><img src="/wp-content/uploads/2014/06/download.png" class="img-circle" alt="Bootstrap学习（3）_html/css_WEB-ITnose" ><img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail" alt="Bootstrap学习（3）_html/css_WEB-ITnose" ></body></html>
显示结果如下：
以下类可用于任何图片中。
| .img-rounded | 为图片添加圆角 (IE8 不支持) |
| .img-circle | 将图片变为圆形 (IE8 不支持) |
| .img-thumbnail | 缩略图功能 |
| .img-responsive | 图片响应式 (将很好地扩展到父元素) |
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> </head> <body style = "background-color:black"> <div class="container" style = "color:white"> <h2>图片</h2> <p> .img-rounded 类为图片添加圆角 (IE8 不支持):</p> <img src="1.jpg" class="img-rounded" alt="Cinque Terre" style="max-width:90%" style="max-width:90%"> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body></html>
效果如下图所示：
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> </head> <body style = "background-color:black"> <div class="container" style = "color:white"> <h2>图片</h2> <p> .img-rounded 类为图片添加圆角 (IE8 不支持):</p> <img src="1.jpg" class="img-circle" alt="Cinque Terre" style="max-width:90%" style="max-width:90%"> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body></html>
效果如下图所示
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> </head> <body style = "background-color:black"> <div class="container" style = "color:white"> <h2>图片</h2> <p> .img-thumbnail 类可制作图片缩略图:</p> <img src="1.jpg" class="img-thumbnail" alt="Cinque Terre" style="max-width:90%" style="max-width:90%"> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body></html>
效果如下图所示：
通过在 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> </head> <body style = "background-color:black"> <div class="container" style = "color:white"> <h2>图片</h2> <p> .img-thumbnail 类可制作图片缩略图:</p> <img src="1.jpg" class="img-responsive" alt="Cinque Terre" style="max-width:90%" style="max-width:90%"> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body></html>
效果如下图所示
Bootstrap学习（1）：
Bootstrap学习（2）：
致谢：感谢您的阅读！
Computer application areas
nullpointerexception exception
The difference between PD fast charging and general fast charging
What are the ways to clear floats?
Solution to computer display error code 651
How to share a printer between two computers
Check if the port is open in linux
Solution to sql procedure syntax error
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
