Bootstrap学习(3),bootstrap学习澳门金沙30064在线网站

By admin in 计算机教程 on 2019年6月23日

一般的样式

在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前,我们将看到
Bootstrap 3 提供的定义图像的一般的样式。

img {    border: 0;  }

 

这是在 Bootstrap 3 的 CSS 中找到的第一个为图像定义的 CSS
规则,当图像呈现时用来移除边框。

然后,在打印的媒体查询内,规定了这些规则。

 img {      page-break-inside: avoid;    }    img {      max-width: 100% !important;    }

 

page-break-inside: avoid; 避免图像内的分页符。

max-width: 100% !important;
为图像定义的样式是显而易见的。这里它用于确定即使图像的宽度超出了容器,它也能被限制在容器内显示。它与
!important
一起使用,来覆盖其他任何破坏这种样式的样式。有时候,开发人员想让样式更好地支持移动设备上图像的友好呈现,会特别使用这两个规则。

这里还有另一个用于图像的规则

img {    vertical-align: middle;  }

 

由于这条规则,一个图像会在 div 或者其他元素内垂直居中。如下面实例所示。

<!DOCTYPE html>  <html>    <head>      <title>example of rendering images in Bootstrap 3</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- Bootstrap -->      <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">      <style>      body {      padding: 50px      }       .mdl {       background-color: silver;       padding: 7px      }      </style>      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->      <!--[if lt IE 9]>        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>      <![endif]-->    </head>    <body>  <p class="mdl"><img src="icon-default-screenshot.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->      <script src="https://code.jquery.com/jquery.js"></script>      <!-- Include all compiled plugins (below), or include individual files as needed -->      <script src="dist/js/bootstrap.min.js"></script>    </body>  </html>

效果如图:

澳门金沙30064在线网站 1

 

Bootstrap 3 提供了三个 class 用于呈现带有明确样式的图像。

Bootstrap学习(3),bootstrap学习

img-rounded

您可以使用这个 class 来呈现带有圆角的图像。为了实现这点,Bootstrap
提供了 img-rounded class。该 class 的样式如下定义

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

 

所以,它把 border-radius 属性设置为带有 6
像素值,用来定义相关图像的圆角。下面的实例演示了两个相同的图像,第一个图像不带
img-rounded class,第二个图像带有 img-rounded
class。请注意,第二个图像是圆角的。

澳门金沙30064在线网站 2

<!DOCTYPE html>  <html>    <head>      <title>example of rendering images with rounded corners with Bootstrap 3</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- Bootstrap -->      <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">      <style>      body {      padding: 50px      }      </style>      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->      <!--[if lt IE 9]>        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>      <![endif]-->    </head>    <body>  <img src="rounded-corner-images.png" alt="image with rounded corners">  <img src="rounded-corner-images.png" alt="image with rounded corners" class="img-rounded">  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->      <script src="https://code.jquery.com/jquery.js"></script>      <!-- Include all compiled plugins (below), or include individual files as needed -->      <script src="dist/js/bootstrap.min.js"></script>    </body>  </html>

 

Bootstrap 图片

   Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的
class:

  • .img-rounded:添加 border-radius:6px 来获得图片圆角。
  • .img-circle:添加 border-radius:500px 来让整个图片变成圆形。
  • .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

请看下面的实例演示:

<!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">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-thumbnail">

</body>
</html>            

 显示结果如下:

澳门金沙30064在线网站 3

img-thumbnail

这是另一个 Bootstrap 3 的 CSS class,它给图像添加了一个缩略图。该 class
的代码显示如下

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

 

下面是一个使用了该 class 的实例。

澳门金沙30064在线网站 4

<!DOCTYPE html>  <html>    <head>      <title>Images thumbnail with Bootstrap 3</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- Bootstrap -->      <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">      <style>      body {      padding: 50px      }      </style>      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->      <!--[if lt IE 9]>        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>      <![endif]-->    </head>    <body>  <img src="image-with-thumbnail.png" alt="image without thumbnail corners">  <img src="image-with-thumbnail.png" alt="image with thumbnail corners" class="img-thumbnail">  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->      <script src="https://code.jquery.com/jquery.js"></script>      <!-- Include all compiled plugins (below), or include individual files as needed -->      <script src="dist/js/bootstrap.min.js"></script>    </body>  </html>

澳门金沙30064在线网站, 

<img> 类

以下类可用于任何图片中。

描述
.img-rounded 为图片添加圆角 (IE8 不支持)
.img-circle 将图片变为圆形 (IE8 不支持)
.img-thumbnail 缩略图功能
.img-responsive 图片响应式 (将很好地扩展到父元素)

img-circle

通过使用 border-radius 属性,Bootstrap 3
创建了一个以圆形呈现的图像。img-circle class 的 CSS 代码如下

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

 

点击这里,在线查看实例。下面是截屏和代码。

澳门金沙30064在线网站 5

<!DOCTYPE html>  <html>    <head>      <title>Images with circle with Bootstrap 3</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- Bootstrap -->      <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">      <style>      body {      padding: 50px      }      </style>      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->      <!--[if lt IE 9]>        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>      <![endif]-->    </head>    <body>  <img src="image-with-circle.png" alt="image without circle shape">  <img src="image-with-circle.png" alt="image with circle shape" class="img-circle">  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->      <script src="https://code.jquery.com/jquery.js"></script>      <!-- Include all compiled plugins (below), or include individual files as needed -->      <script src="dist/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-rounded" alt="Cinque Terre" width="304" height="236"> 
    </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>

效果如下图所示:

澳门金沙30064在线网站 6

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门金沙30064在线网站 版权所有