Kelas pembantu Bootstrap
Bab ini akan membincangkan beberapa kelas pembantu dalam Bootstrap yang mungkin berguna.
Teks
Kelas berbeza berikut menunjukkan warna teks yang berbeza. Jika teks ialah pautan, teks akan menjadi gelap apabila tetikus digerakkan ke atasnya:
| 类 | 描述 | 实例 |
|---|---|---|
| .text-muted | "text-muted" 类的文本样式 | 尝试一下 |
| .text-primary | "text-primary" 类的文本样式 | 尝试一下 |
| .text-success | "text-success" 类的文本样式 | 尝试一下 |
| .text-info | "text-info" 类的文本样式 | 尝试一下 |
| .text-warning | "text-warning" 类的文本样式 | 尝试一下 |
| .text-danger | "text-danger" 类的文本样式 | 尝试一下 |
Latar Belakang
Kelas berbeza berikut menunjukkan warna latar belakang yang berbeza. Jika teks ialah pautan, menggerakkan tetikus ke atas teks akan menjadi gelap:
| 类 | 描述 | 实例 |
|---|---|---|
| .bg-primary | 表格单元格使用了 "bg-primary" 类 | 尝试一下 |
| .bg-success | 表格单元格使用了 "bg-success" 类 | 尝试一下 |
| .bg-info | 表格单元格使用了 "bg-info" 类 | 尝试一下 |
| .bg-warning | 表格单元格使用了 "bg-warning" 类 | 尝试一下 |
| .bg-danger | 表格单元格使用了 "bg-danger" 类 | 尝试一下 |
Lain-lain
| 类 | 描述 | 实例 |
|---|---|---|
| .pull-left | 元素浮动到左边 | 尝试一下 |
| .pull-right | 元素浮动到右边 | 尝试一下 |
| .center-block | 设置元素为 display:block 并居中显示 | 尝试一下 |
| .clearfix | 清除浮动 | |
| .show | 强制元素显示 | 尝试一下 |
| .hidden | 强制元素隐藏 | 尝试一下 |
| .sr-only | 除了屏幕阅读器外，其他设备上隐藏元素 | 尝试一下 |
| .sr-only-focusable | 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) | 尝试一下 |
| .text-hide | 将页面元素所包含的文本内容替换为背景图 | 尝试一下 |
| .close | 显示关闭按钮 | 尝试一下 |
| .caret | 显示下拉式功能 | 尝试一下 |
Lagi Contoh
Ikon Tutup
Gunakan ikon tutup universal untuk menutup mod dan makluman. Gunakan kelas tutup untuk mendapatkan ikon tutup.
<! DOCTYPE html>
<html>
<head>
;link rel="stylesheet" href="http://apps.bdimg. com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http:// /apps.bdimg.com/libs/jquery/2.1.1/jquery.min .js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></ skrip>
</head>
<badan>
<p>Tutup contoh ikon
<button type="button" class="close" aria-hidden= "benar">
×
</butang>
</p>
</body>
</html>
<html>
<head>
;link rel="stylesheet" href="http://apps.bdimg. com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http:// /apps.bdimg.com/libs/jquery/2.1.1/jquery.min .js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></ skrip>
</head>
<badan>
<p>Tutup contoh ikon
<button type="button" class="close" aria-hidden= "benar">
×
</butang>
</p>
</body>
</html>
Instance
Instance yang sedang berjalan»Klik butang "Run Instance" untuk melihat instance dalam talian
Caret<!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> <p>关闭图标实例 <button type="button" class="close" aria-hidden="true"> × </button> </p> </body> </html>
Instance yang sedang berjalan»Klik butang "Run Instance" untuk melihat instance dalam talian
<!DOCTYPE html>
Instance<html>
<head>
<title>Contoh Bootstrap - Caret</title> 🎜> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css /bootstrap.min.css">
<script src=" http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/ libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<p>Contoh Caret
<span class="caret"></span>
</p>
</body>
</html>
<head>
<title>Contoh Bootstrap - Caret</title> 🎜> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css /bootstrap.min.css">
<script src=" http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/ libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<p>Contoh Caret
<span class="caret"></span>
</p>
</body>
</html>
<!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>
<p>插入符实例
<span class="caret"></span>
</p>
</body>
</html>
Instance yang sedang berjalan»Klik butang "Run Instance" untuk melihat instance dalam talian
Quick Float
Anda boleh menggunakan kelas tarik-kiri atau tarik-kanan untuk mengapungkan elemen masing-masing ke kiri atau kanan. Contoh berikut menunjukkan ini. < ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http: //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/ bootstrap /3.3.0/js/bootstrap.min.js"></script>
Contoh Jalankan »</head>
<badan>
<div class="pull- kiri ">
Cepat terapung ke kiri
</div>
<div class="pull-right">
Cepat terapung ke kanan
</div> ;
</body>
</html>
Instance
<badan>
<div class="pull- kiri ">
Cepat terapung ke kiri
</div>
<div class="pull-right">
Cepat terapung ke kanan
</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="pull-left"> 向左快速浮动 </div> <div class="pull-right"> 向右快速浮动 </div> </body> </html>
Klik butang "Run Instance" untuk melihat contoh dalam talian
Untuk menjajarkan komponen dalam bar navigasi, sila gunakan.navbar-left atau .navbar-kanan
sebaliknya. Lihat bar navigasi Bootstrap.
Gunakan kelas blok tengah untuk memusatkan elemen.
<!DOCTYPE html>
<html><head> <title>Contoh Bootstrap - Blok Kandungan Berpusat</title> ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http: / /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/ bootstrap /3.3.0/js/bootstrap.min.js"></script>Klik butang "Run Instance" untuk melihat contoh dalam talian
Run Instance»
</head>
<body>
<div class="row" > 🎜></div>
</body>
</html>
Instance
rreee
Jalankan contoh»
<body>
<div class="row" > 🎜></div>
</body>
</html>
Instance
rreee
Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat tika dalam talian
Kosongkan apungan
Untuk mengosongkan apungan elemen, sila gunakan kelas .clearfix. < ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http :/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs /bootstrap /3.3.0/js/bootstrap.min.js"></script>
Jalankan Instance»</head>
<body>
<div class="clearfix " style ="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
Ke kiri Terapung dengan pantas
</div>
<div class="pull-right" style="background: #DA81F5;">
Terapung dengan pantas ke kanan
< /div>
</div>
</body>
</html>
Instance
rreee
<body>
<div class="clearfix " style ="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
Ke kiri Terapung dengan pantas
</div>
<div class="pull-right" style="background: #DA81F5;">
Terapung dengan pantas ke kanan
< /div>
</div>
</body>
</html>
Instance
rreee
Klik butang "Run Instance" untuk melihat contoh dalam talian
Menunjukkan dan Menyembunyikan Kandungan
Anda boleh memaksa elemen untuk ditunjukkan atau disembunyikan (termasuk oleh pembaca skrin) dengan menggunakan kelas .show dan .tersembunyi.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Bootstrap - Menunjukkan dan Menyembunyikan Kandungan</title><🎜 <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http : //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs / bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row " style="padding: 91px 100px 19px 50px;">
<div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
Ini ialah contoh kelas persembahan
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
Ini ialah kelas hide Contoh
Jalankan Instance»
<html>
<head>
<title>Contoh Bootstrap - Menunjukkan dan Menyembunyikan Kandungan</title><🎜 <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http : //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs / bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row " style="padding: 91px 100px 19px 50px;">
<div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
Ini ialah contoh kelas persembahan
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
Ini ialah kelas hide Contoh
<!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="row"> <div class="center-block" style="width:200px;background-color:#ccc;"> 这是 center-block 实例 </div> </div> </body> </html>
Jalankan Instance»
Pembaca Skrin
Anda boleh menyembunyikan elemen daripada semua peranti kecuali pembaca skrin dengan menggunakan kelas .sr-sahaja.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Bootstrap - Pembaca Skrin</title><;🎜> < pautan rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http: // apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/ bootstrap/ 3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style= "padding: 91px 100px 19px 50px;">
<form class="form-inline" role="form">
<div class="form-group">
< ;label class="sr-only" for="email">Alamat e-mel</label>
;
🎜>
</body>
</html>
Instance
<html>
<head>
<title>Contoh Bootstrap - Pembaca Skrin</title><;🎜> < pautan rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http: // apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/ bootstrap/ 3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style= "padding: 91px 100px 19px 50px;">
<form class="form-inline" role="form">
<div class="form-group">
< ;label class="sr-only" for="email">Alamat e-mel</label>
;
🎜>
</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="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;"> <div class="pull-left" style="background:#58D3F7;"> 向左快速浮动 </div> <div class="pull-right" style="background: #DA81F5;"> 向右快速浮动 </div> </div> </body> </html>
