Twitter Bootstrap 3 Учебник по изображениям
Задача
В этом уроке мы обсудим три класса Bootstrap 3 для стилизации изображений. Мы также обсудим, что Bootstrap 3 предлагает для адаптивных изображений.
Общие стили
Прежде чем мы обсудим специальные классы, предлагаемые Bootstrap 3 для стилизации изображений, мы посмотрим, какие общие стили предлагает Bootstrap 3 для изображений.
img {
border: 0;
}
Это первое правило CSS (для изображений), которое можно найти в CSS Bootstrap 3. Это удаляет любую границу при рендеринге изображений.
Затем в медиа-запросе на печать указываются их правила.
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
разрыв страницы: избегать; избегает разрывов страниц внутри изображений.
максимальная ширина: 100%! важно; стиль для изображений заметен. Здесь он используется для того, чтобы убедиться, что даже если ширина изображения превышает контейнер, оно ограничено помещением контейнера. Он используется вместе с ! Важно, чтобы переопределить любые другие стили, мешающие этому. Оба иногда используются разработчиками, особенно когда они хотят, чтобы их стиль был достаточно хорошим, чтобы правильно отображать изображения на мобильных устройствах.
Есть другое правило для изображений
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>
Демонстрацию в режиме реального времени можно посмотреть здесь.
Обратите внимание, однако, что вам может потребоваться, чтобы дополнительные стили центрировали изображения по вертикали в зависимости от контекста.
Специальные стили
Bootstrap 3 предлагает свои классы для визуализации изображений с явными стилями.
IMG округлены
Вы можете использовать этот класс для рендеринга изображений с закругленными углами. Для этого Bootstrap имеет img-округленный класс. Стили для указанного класса
.img-rounded {
border-radius: 6px;
}
Таким образом, он устанавливает свойство border-radius со значением 6 пикселей для округления углов связанного изображения. В следующем примере показано то же изображение, которое отображается сначала без img -руглого класса, а затем с ним. Обратите внимание, что у второго изображения закруглены углы. У вас может быть живое демо здесь .
<!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>
IMG-миниатюр
Это еще один класс CSS Bootstrap 3, который добавляет миниатюры, похожие на стили, к изображениям. Код класса показан ниже
.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;
}
Ниже приведен пример использования этого класса. Вы можете найти живое демо здесь .
<!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>
IMG-круг
Используя свойство border-radius, Bootstrap 3 создает изображение рендеринга стиля в форме круга. Код CSS для класса img-circle следующий
.img-circle {
border-radius: 50%;
}
Рабочий пример , это снимок экрана и следующий код.
<!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>
Адаптивное изображение
Twitter Bootstrap 3 не предлагает адаптивное изображение из коробки . Вы должны добавить img-отзывчивый класс к изображению, чтобы сделать его отзывчивым. Класс имеет следующий код CSS.
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Он определяет, что изображения должны отображаться в виде элементов уровня блока, высота, а также высота изображения и максимальная ширина изображения составляют 100%, чтобы ограничить изображение в соответствии с устройствами, на которых оно отображается.
Чтобы сделать отзывчивую функцию изображения по умолчанию, вы можете добавить этот код CSS в img {} .
Ниже приведен пример использования этого класса. Вы можете найти живое демо здесь .
<!DOCTYPE html>
<html>
<head>
<title>Responsive image example 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
}
img {
margin-bottom:30px
}
</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="without responsive image feature">
<img src="image-with-circle.png" alt="with responsive image feature" class="img-responsive">
<!-- 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>
Этот метод добавления отзывчивой функции к изображениям имеет ограничения.
Загрузка одного и того же большого изображения с высоким разрешением как для большого экрана, так и для мобильного устройства, где размер экрана намного меньше, вызывает проблемы с производительностью . Поскольку браузеры предварительно загружают изображения еще до загрузки CSS и JS, а также при медленном интернет-соединении, это также может привести к проблемам с производительностью. Представьте, что у вас есть большое изображение, и определенный объект в этом изображении может выглядеть довольно маленьким, когда вы просматриваете это изображение на мобильном устройстве, где изображение уменьшено до уменьшенной версии, что называется проблемой художественного направления .
Разработчики предложили решения для преодоления этих ограничений. Мы увидим пример использования HiSRC Марка Грабански и Кристофера Шмитта . Это плагин Jquery, который автоматически создает версии изображений с низким, средним и высоким разрешением и обслуживает их в зависимости от разрешения и пропускной способности устройства, на котором он отображается.
В нашем следующем учебном руководстве по адаптивным изображениям мы подробно обсудим все эти методы.
Ниже приведен код и живая демонстрация
<!DOCTYPE html>
<html>
<head>
<title>Responsive image with HiSRC example 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
}
img {
margin-bottom:30px
}
</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="5216852563_eca0af1b0d_m.jpg" data-1x="5216852563_eca0af1b0d.jpg" data-2x="5216852563_90c3f9c402_o.jpg" class="hisrc" />
<!-- 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>
<script>
$(document).ready(function(){
$(".hisrc").hisrc();
});
</script>
<p>Photo courtesy: /http://www.flickr.com/photos/cubagallery/</p>
</body>
</html>
Вопросы? Предложения? Присоединяйтесь к обсуждению ниже. Для получения новых уроков, пожалуйста, подпишитесь на нашу ленту новостей для будущих уроков.
Предыдущий: Twitter Bootstrap 3 кнопки учебник
Далее: Twitter Bootstrap иконки
Новый контент: Composer: менеджер зависимостей для PHP , R программирования