Bab Enam: Kelas Kumpulan Bantu dan Alat Responsif_kemahiran javascript

Bootstrap, daripada Twitter, pada masa ini merupakan rangka kerja bahagian hadapan yang paling popular. Bootstrap adalah berdasarkan HTML, CSS dan JAVASCRIPT Ia mudah dan fleksibel, menjadikan pembangunan web lebih pantas.

Mata pembelajaran:

1. Kelas kumpulan tambahan

2. Alat responsif

Dalam pelajaran ini, kami mempelajari tentang kelas tambahan Bootstrap dan alatan responsif Kelas tambahan menyediakan satu set kelas untuk membantu dalam reka bentuk halaman, manakala alat responsif menggunakan pertanyaan media untuk memaparkan atau menyembunyikan kandungan tertentu.

1. Kelas bantu

Bootstrap menyediakan beberapa gaya kumpulan tambahan kecil dalam reka letak, digunakan untuk menetapkan warna teks dan warna latar belakang, memaparkan ikon rapat, dsb.

1. Warna teks senario

样式列表
样式名 描述
text-muted 柔和灰
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红 
//各种色调的字体
<p class="text-muted">Bootstrap 视频教程</p>
<p class="text-primary">Bootstrap 视频教程</p>
<p class="text-success">Bootstrap 视频教程</p>
<p class="text-info">Bootstrap 视频教程</p>
<p class="text-warning">Bootstrap 视频教程</p>
<p class="text-danger">Bootstrap 视频教程</p> 

2. Warna latar belakang pemandangan

样式列表

样式名 描述
bg-primary 主要蓝
bg-success 成功绿
bg-info 信息蓝
bg-warning 警告黄
bg-danger 危险红 
//各种色调的背景
<p class="bg-primary">Bootstrap 视频教程</p>
<p class="bg-success">Bootstrap 视频教程</p>
<p class="bg-info">Bootstrap 视频教程</p>
<p class="bg-warning">Bootstrap 视频教程</p>
<p class="bg-danger">Bootstrap 视频教程</p> 

3. Butang tutup

<button type="button" class="close">&times;</button> 

4. Simbol segitiga

<span class="caret"></span> 

5. Terapung cepat

<div class="pull-left">左边</div>
<div class="pull-right">右边</div> 

Nota: Apungan ini sebenarnya terapung, tetapi !penting digunakan untuk mengukuhkan keutamaan.

6. Pemusatan peringkat blok

<div class="center-block">居中</div> 

Nota: ialah margin:x auto;

7. Bersihkan terapung

<div class="clearfix"></div> 

Nota: Div ini boleh diletakkan di hadapan bongkah terapung yang perlu dibersihkan.

8. Tunjukkan dan sembunyikan

<div class="show">show</div>
<div class="hidden">hidden</div> 

2. Alat Responsif

Apabila media membuat pertanyaan, kadangkala ia perlu untuk menunjukkan dan menyembunyikan beberapa kandungan untuk saiz skrin yang berbeza. Kelas alat responsif menyediakan penyelesaian ini.

//超小屏幕激活显示
<div class="visible-xs-block a">Bootstrap</div> 
//超小屏幕激活隐藏
<div class="hidden-xs a">Bootstrap</div> 

Nota: Terdapat tiga variasi untuk kandungan yang dipaparkan: blok, blok sebaris dan sebaris.

Di atas ialah kandungan yang berkaitan dengan kelas kumpulan tambahan dan alat responsif komponen BootStrap yang diperkenalkan oleh editor saya harap ia akan membantu semua orang!