Utiliti Responsif Bootstrap


Bootstrap menyediakan kelas pembantu untuk pembangunan mesra mudah alih yang lebih pantas. Ini boleh digabungkan dengan peranti besar, kecil dan sederhana melalui pertanyaan media untuk membolehkan kandungan ditunjukkan dan disembunyikan pada peranti.

Alat ini perlu digunakan dengan berhati-hati untuk mengelak daripada mencipta versi yang sama sekali berbeza bagi tapak yang sama. Utiliti responsif pada masa ini hanya berfungsi dengan pensuisan blok dan meja.


超小屏幕
           手机 (<768px)		小屏幕
           平板 (≥768px)		中等屏幕
           桌面 (≥992px)		大屏幕
           桌面 (≥1200px)
.visible-xs-*可见隐藏隐藏隐藏
.visible-sm-*隐藏可见隐藏隐藏
.visible-md-*隐藏隐藏可见隐藏
.visible-lg-*隐藏隐藏隐藏可见
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏

Bermula dari v3.2.0, kelas bentuk .visible-*-* mempunyai tiga varian untuk setiap saiz skrin, satu untuk setiap CSS Senarai atribut paparan yang berbeza ialah seperti berikut:

类组CSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;

Oleh itu, mengambil skrin ultra-kecil (xs) sebagai contoh, kelas .visible-*-* yang tersedia ialah: .visible-xs-block, .visible- xs- sebaris dan .bolehlihat-xs-sebaris-blok.

Kelas .visible-xs, .visible-sm, .visible-md dan .visible-lg juga wujud. Walau bagaimanapun, penggunaannya tidak lagi disyorkan bermula dari v3.2.0. Mereka kebanyakannya sama dengan .visible-*-block, kecuali untuk kes khas elemen berkaitan <table>

Kelas Cetak

Jadual berikut menyenaraikan kelas cetakan. Gunakan togol ini untuk mencetak kandungan.

class浏览器打印机
.visible-print-block
           .visible-print-inline
           .visible-print-inline-block		可见
.hidden-print可见

Contoh

Contoh berikut menunjukkan penggunaan kelas pembantu yang disenaraikan di atas. Uji kelas utiliti responsif dengan mengubah saiz tetingkap penyemak imbas atau memuatkan tika pada peranti lain.

<!DOCTYPE html>
<html>
<head>
<title>Contoh Bootstrap - Utiliti Responsif</title> <🎜 > pautan 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 ;
bayang kotak: masukkan 1px -1px 1px #444, masukkan -1px 1px 1px #444;">
🎜>                                                                                 < sm-3" style="warna latar belakang: #dedef8;
kotak- bayang: sisipkan 1px -1px 1px #444, sisipan -1px 1px 1px #444;">
<span class="hidden -sm">Small</span>
                                                                                              classfix = kelihatan jelas -xs"></div> <> & Lt; kelas div = "warna-xs-6 warna," gaya = "warna latar belakang:#dedef8;
bayang kotak: masukkan 1px -1px 1px#444, masukkan -1px 1px 1px 1m ;/span>
                                                                                                                                                                                                                       1px -1px 1px #444, inset -1px 1px 1px #444;">="
"<span/span > lg" >✔ Kelihatan pada peranti besar</span>
             </div>
</div>

</body>
<>
<>
🎜>

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>
Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

←