Twitter Bootstrap Миниатюры учебник

Последнее обновление: 27 мая 2019 г. 13:08:50 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Вступление

В этом уроке вы увидите, как создавать миниатюры, то есть сетки изображений, видео, текста и т. Д., Используя Twitter Bootstrap.

Миниатюры имеют очень простую и гибкую разметку. Кроме того, вы можете использовать существующие классы начальной загрузки CSS, такие как .span2 или .span3, чтобы установить ширину и высоту миниатюр.

Почему вы должны использовать миниатюры

При создании пользовательского интерфейса в Интернете часто требуется создать сетку из фотографий или видео. Хорошим примером является веб-сайт компании или портфолио, где вам нужно отобразить изображения вашего продукта или ваших творений. Вы можете использовать эскизы для этого.

Пример использования миниатюр по умолчанию

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of using default thumbnails from w3resource.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of using default thumbnails from w3resource.com">
<meta name="author" content="">
<!-- Le styles -->
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </head>
  <body>
    <div class="container">
      <ul class="thumbnails">
  <li class="span3">
    <a href="/php/php-home.php" class="thumbnail">
      <img src="php-thumb.png" alt="php tutorial" width="260" height="180" />
    </a>
  </li>
 <li class="span4">
    <a href="/sql/tutorials.php" class="thumbnail">
      <img src="mysql-thumb.png" alt="mysql tutorial" width="300" height="180" />
    </a>
  </li>
 <li class="span5">
    <a href="/javascript/javascript.php" class="thumbnail">
      <img src="js-thumb.png" alt="js tutorial" width="380" height="180" >
    </a>
  </li>
</ul>
<hr>
</div> <!-- /container -->
</body>
</html>

Посмотреть пример в прямом эфире

Вы можете настроить миниатюры по умолчанию и добавить абзацы, заголовок, список или любой другой вид HTML-контента.

Пример настроенных миниатюр

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of thumbnails customized from w3resource.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example of thumbnails customized from w3resource.com">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
	<link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </head>
<body>
<div class="container">
<ul class="thumbnails">
        <li class="span5">
          <div class="thumbnail">
            <img src="shoes1.jpg" alt="product 1">
            <div class="caption">
              <h5>Product detail</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 		magna aliqua.</p>
              <p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
            </div>
          </div>
        </li>
        <li class="span5">
          <div class="thumbnail">
            <img src="shoes2.jpg" alt="product 2">
            <div class="caption">
              <h5>Product detail</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
            </div>
          </div>
        </li>
      </ul>
      <hr>
      <footer>
        <p>© Company 2012</p>
      </footer>
    </div> <!-- /container -->
</body>
</html>

Посмотреть пример в прямом эфире

Вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах, здесь.

Предыдущий: Twitter Bootstrap учебник по встроенным меткам и значкам
Next: Учебник по индикаторам выполнения Twitter Bootstrap