Bootstrap 图片

来源：互联网发布：画图软件使用教程编辑：程序博客网时间：2024/06/02 05:31

Bootstrap 提供了4个可对图片应用简单样式的 class，请看html代码

<!DOCTYPE html><html><head>   <meta charset="utf-8">   <title>Bootstrap-图片</title>   <link rel="stylesheet" href="css/bootstrap.min.css">  <style>    h1{     color: #0F0305;     font-weight:900;       text-shadow:1px 1px 0px #AD55C9;       }p{ color: #6A031A; size: 12px;}</style></head><body><div class="container"><div class="header"><h1>图片1</h1><br /><p>.img-rounded：添加 border-radius:20px 来获得图片圆角。</p><br><img src="img/1.jpg" class="img-rounded" style=" border-radius:20px;"></div><div class="one"><h1>图片2</h1><br /><p>.img-circle：添加 border-radius:500px 来让整个图片变成圆形。</p><br><img src="img/1.jpg" width="600" height="600" class="img-circle" style="border-radius:500px;"></div><div class="two"><h1>图片3</h1><br /><p>.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。</p><br><img src="img/1.jpg" class="img-thumbnail" style="padding:8px 10px 8px 10px; "></div><div class="foot"><h1>图片4</h1><br /><p>.img-responsive让图片支持响应式设计。 图片将很好地扩展到父元素。   .img-responsive 类将 max-width: 100%;和 height: auto; 样式应用在图片上：</p><br><img src="img/1.jpg" class="img-responsive"></div></div><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html>

效果图

2 0