Bootstrap e-Book In Hindi

Image Styleing in bootstrap :

Bootstrap का use कर  के image को style देने के लिए क्लास निम्नलिखित है

  1. .img-rounded
  2. .img-circle
  3. .img-thumbnail

.img-rounded :

इस class का use image को 6px का border-radius add किया जाता है img-rounded class का उदाहरण

Run

<html>
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
      <meta name="viewport" content="width=device-width" />
      <title>img- Style Example</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
      <link rel="stylesheet" href="css/style.css" />
</head>
<body>
      <img src="g2.jpg"  class="img-rounded">
</body>
</html>

 

 

.img-circle :

इस class का use 500px का   border-radius add किया जाता है .img-circle का उदाहरण निम्नलिखित है

Run

<html>
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
      <meta name="viewport" content="width=device-width" />
      <title>img Style Example</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
      <link rel="stylesheet" href="css/style.css" />
</head>
<body>
      <img src="g2.jpg"  class="img-circle">
</body>
</html>

 

.img-thumbnail :

इस class का उदाहरण निम्नलिखित है

Run

<html>
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
      <meta name="viewport" content="width=device-width" />
      <title>img-responsive Example</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
      <link rel="stylesheet" href="css/style.css" />
</head>
<body>
      <img src="g2.jpg"  class="img-thumbnail">
</body>
</html>

 

 

Prv Next


.