Tutoriel de base Bootstrap

Plugins Bootstrap

图片 Bootstrap

Dans ce chapitre, nous allons étudier la prise en charge des images par Bootstrap. Bootstrap fournit trois classes faciles à appliquer aux images :

.img-rounded：Ajouter border-radius:6px Pour obtenir des coins arrondis de l'image.
.img-circle：Ajouter border-radius:50% Pour rendre toute l'image ronde.
.img-thumbnail：Ajouter un padding interne (padding) et un bord gris.

Voyez ci-dessous les exemples de démonstration :

在线示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"　height="
	<title>Exemple Bootstrap　-　Image</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
body>/head>
<body>
<img src="/run/images/download.png" class="img-rounded">
<img src="/run/images/download.png" class="img-circle">
<img src="/run/images/download.png" class="img-thumbnail">
body>/div>
body>/<

html>/测试看看 ‹

Les résultats sont affichés ci-dessous :

<img> classe

Les classes suivantes peuvent être utilisées pour toute image :

Classe	Description	示例
.img-rounded	Ajout de bords arrondis à l'image (IE8 non supporté)	Essayez
.img-circle	Rendu des images en forme de cercle (IE8 non supporté)	Essayez
.img-thumbnail	Fonction de miniature	Essayez
.img-responsive	Images responsives (s'étendent bien à l'élément parent)	Essayez

Images responsives

En ajoutant .img à l'étiquette <img> :-La classe responsive permet aux images de gérer le design responsive. 　Les images s'étendent bien à l'élément parent.

.img-La classe responsive permet de définir un max-width: 100%; et height: auto; les styles sont appliqués aux images :

在线示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"　height="　
	<title>基础教程网(oldtoolbag.com)</title>　
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
body>/head>
<body>
<div class="container">
	<h2>image</h2>
	<p>　.img-responsive类让图片支持响应式，将很好地扩展到父元素　(通过改变窗口大小查看效果):html>/测试看看 ‹

类辅助 Bootstrap 按钮 Bootstrap