Panel bootstrap mesti belajar setiap hari kemahiran javascript

1. Panel

Panel ialah komponen baharu rangka kerja Bootstrap Fungsi utamanya adalah untuk mengendalikan beberapa fungsi yang tidak dapat diselesaikan oleh komponen lain. Juga mempunyai kod sumber berbeza dalam versi berbeza:

☑ Versi kurang: Fail kod sumber yang sepadan ialah panels.less

☑ Versi Sass: Fail kod sumber yang sepadan ialah _panels.scss

☑ Tersusun Bootstrap: sepadan dengan baris 4995 hingga 5302 fail bootstrap.css

2. Panel – Panel Asas

Panel asas sangat mudah Ia adalah bekas div menggunakan gaya "panel" untuk menjana blok paparan teks dengan sempadan. Memandangkan "panel" tidak mengawal warna tema, tema pengawal warna "panel-default" ditambah berdasarkan "panel", dan "div.panel-body" ditambahkan ke dalam untuk meletakkan kandungan utama panel:

<div class="panel panel-default">
 <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>

Kesan operasi adalah seperti berikut:

Analisis prinsip:

"Panel" terutamanya menetapkan sempadan, jarak dan sudut bulat tertentu:

/Baris 4995~Baris 5005 fail bootstrap.css/

.panel {
 margin-bottom: 20px;
 background-color: #fff;
 border: 1px solid transparent;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
 padding: 15px;
}

3. Panel – panel dengan kepala dan ekor

Panel asas kelihatan terlalu ringkas Untuk memperkayakan fungsi panel, Bootstrap menambah kesan "Pengepala Panel" dan "Pengaki Halaman" secara khas pada panel:

☑ tajuk panel: digunakan untuk menetapkan gaya pengepala panel

☑ panel-footer: digunakan untuk menetapkan gaya panel footer

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者：大漠</div>
</div>

Kesan operasi adalah seperti berikut:

Analisis prinsip:

Kepala panel dan pengaki panel hanya mempunyai jarak dan penjuru bulat yang ditetapkan:

/Baris 5006~Baris 5030 fail bootstrap.css/

.panel-heading {
 padding: 10px 15px;
 border-bottom: 1px solid transparent;
 border-top-left-radius: 3px;
 border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
 color: inherit;
}
.panel-title {
 margin-top: 0;
 margin-bottom: 0;
 font-size: 16px;
 color: inherit;
}
.panel-title > a {
 color: inherit;
}
.panel-footer {
 padding: 10px 15px;
 background-color: #f5f5f5;
 border-top: 1px solid #ddd;
 border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;
}

4. Panel – panel warna

Dalam bahagian Panel Asas, kami mengetahui bahawa gaya panel tidak menetapkan gaya tema, tetapi gaya tema ditetapkan melalui lalai panel. Selain gaya tema lalai, komponen panel dalam rangka kerja Bootstrap juga termasuk gaya tema berikut, yang membentuk panel berwarna-warni:

☑ panel-utama: kekunci biru

☑ panel-kejayaan: hijau kejayaan

☑ panel-info:Maklumat Biru

☑ amaran panel: kuning amaran

☑ panel-bahaya: Bahaya Merah

Kaedah penggunaannya sangat mudah Anda hanya perlu menambah nama kelas yang anda perlukan berdasarkan nama kelas panel:

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者：大漠</div>
</div>
…
…
…
…
…

Kesan operasi adalah seperti berikut:

Tidak sukar untuk mencari daripada kesan bahawa gaya ini hanya menukar warna latar belakang, teks dan warna sempadan panel: untuk kod sumber tertentu, anda boleh melihat baris 5195 hingga 5302 fail bootstrap.css.

5 Panel – Kumpulan senarai bersarang dalam panel

Dalam bahagian sebelumnya, kami memperkenalkan cara meletakkan jadual dalam panel Sekarang mari kita pelajari cara meletakkan kumpulan senarai dalam panel Mari lihat contoh:

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">
  <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  </p>
  <ul class="list-group">
   <li class="list-group-item">我是列表项</li>
   <li class="list-group-item">我是列表项</li>
   <li class="list-group-item">我是列表项</li>
  </ul>
 </div>
 <div class="panel-footer">作者：大漠</div>
</div>

Kesan operasi adalah seperti berikut:

Kod Optimumkan:

Sama seperti jadual bersarang, jika anda rasa jaraknya tidak kelihatan baik, anda boleh mengekstrak kumpulan senarai:

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <ul class="list-group">
  <li class="list-group-item">我是列表项</li>
  <li class="list-group-item">我是列表项</li>
  <li class="list-group-item">我是列表项</li>
 </ul>
 <div class="panel-footer">作者：大漠</div>
</div>

Kesan operasi adalah seperti berikut:

Atas sebab yang sama, Bootstrap telah membuat pengoptimuman gaya tertentu untuk kumpulan senarai yang bersarang dalam panel. Untuk kod sumber tertentu, anda boleh melihat baris 5031 hingga 5053 fail bootstrap.css.

Untuk panel, perkara di atas memperkenalkan panel asas, panel warna, dsb. untuk membantu anda mempelajari panel Bootstrap dengan lebih menyeluruh.