Utilitaires réactifs Bootstrap
Bootstrap fournit des classes d'assistance pour un développement plus rapide et adapté aux mobiles. Ceux-ci peuvent être combinés avec des appareils de grande, petite et moyenne taille via des requêtes multimédias pour permettre l'affichage et le masquage du contenu sur l'appareil.
Ces outils doivent être utilisés avec prudence pour éviter de créer des versions complètement différentes d'un même site. Les utilitaires réactifs ne fonctionnent actuellement qu'avec la commutation de blocs et de tables.
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面 (≥992px) | 大屏幕 桌面 (≥1200px) | |
|---|---|---|---|---|
| .visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 |
| .visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 |
| .visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 |
| .visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 |
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
À partir de la v3.2.0, les classes de la forme .visible-*-* ont trois variantes pour chaque taille d'écran, une pour chaque CSS La liste des différents attributs d'affichage est comme suit :
| 类组 | CSS display |
|---|---|
| .visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Par conséquent, en prenant l'ultra-petit écran (xs) comme exemple, les classes .visible-*-* disponibles sont : .visible-xs-block, .visible- xs- inline et .visible-xs-inline-block.
Les classes .visible-xs, .visible-sm, .visible-md et .visible-lg existent également. Cependant, son utilisation n'est plus recommandée à partir de la v3.2.0. Ils sont pour la plupart identiques à .visible-*-block, à l'exception du cas particulier des éléments liés à <table>
Classes d'impression
Le tableau suivant répertorie les classes d'impression. Utilisez ces bascules pour imprimer le contenu.
| class | 浏览器 | 打印机 |
|---|---|---|
| .visible-print-block .visible-print-inline .visible-print-inline-block | 隐藏 | 可见 |
| .hidden-print | 可见 | 隐藏 |
Exemple
L'exemple suivant démontre l'utilisation des classes d'assistance répertoriées ci-dessus. Testez la classe d'utilitaire réactif en redimensionnant la fenêtre du navigateur ou en chargeant une instance sur un autre appareil.
<html>
<head>
<title>Exemple de bootstrap - Utilitaire réactif</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>
<div class="container" style="padding: 40px;" >
<div class="ligne visible sur">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8 ;
box-shadow : encart 1px -1px 1px #444, encart -1px 1px 1px #444;">
< sm-3" style="background-color: #dedef8;
box- ombre : en médaillon 1px -1px 1px #444, en médaillon -1px 1px 1px #444;">
<span class="hidden -sm">Small</span>
div class="clearfix visible -xs"></div> <> & Lt; div class = "color-xs-6 color", style = "background-color:#dedef8;
box-shadow : insérer 1px -1px 1px#444, insérer -1px 1px 1px 1px 1m ;/span>
1px -1px 1px #444, encart -1px 1px 1px #444;">
<span class="hidden-lg">Large</span><> l g" > ✔ Visible sur les grands appareils</span>
</div>
</div>
</body>
</html> 🎜>
Instance
<!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> <div class="container" style="padding: 40px;"> <div class="row visible-on"> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-xs">特别小型</span> <span class="visible-xs">✔ 在特别小型设备上可见</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-sm">小型</span> <span class="visible-sm">✔ 在小型设备上可见</span> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-md">中型</span> <span class="visible-md">✔ 在中型设备上可见</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-lg">大型</span> <span class="visible-lg">✔ 在大型设备上可见</span> </div> </div> </body> </html>
