apakah itu panel bootstrap

Dalam bootstrap, panel merujuk kepada komponen "panel", yang digunakan untuk memasukkan komponen DOM ke dalam kotak untuk mencipta komponen ini, cuma tambahkan gaya "panel" dan "panel-xxx" pada elemen div Itu sahaja, blok paparan teks dengan sempadan akan dihasilkan, dan gaya "panel-xxx" digunakan untuk menetapkan warna tema.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

1

Panel (

) ialah komponen baharu rangka kerja Panels Fungsi utamanya adalah untuk mengendalikan beberapa fungsi yang tidak dapat diselesaikan oleh komponen lain. Terdapat juga kod sumber yang berbeza dalam versi berbeza: Bootstrap

☑

versi: fail kod sumber yang sepadan ialah panels.lessLess

☑

versi: fail kod sumber yang sepadan ialah _panels .scssSass

☑ Disusun

: Sepadan dengan Bootstrap fail bootstrap.css baris 4995 ~ baris 5302

2. Panel – Panel asas

The panel asas adalah sangat mudah Ia adalah bekas

menggunakan gaya "div" untuk menghasilkan blok paparan teks dengan sempadan. Memandangkan "panel" tidak mengawal warna tema, tema "panel" yang mengawal warna ditambah berdasarkan "panel", dan div gaya "panel-default" ditambah di dalam untuk meletakkan panel. Kandungan utama: dpanel-body

<div>
    <div>我是一个基础面板，带有默认主题样式风格</div>
</div>

Kesan operasi adalah seperti berikut:

Analisis prinsip:

"

" Terutamanya pastikan sempadan , jarak dan sudut bulat Tetapan: panel

Fail/bootstrap.cssBaris 4995~Baris 5005/

.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;
}

Panel – Panel dengan kepala dan ekor

Panel asas kelihatan terlalu mudah

Untuk memperkayakan fungsi panel, kesan "Pengepala Panel" dan "Pengaki Halaman" ditambahkan khas pada panel: Bootstrap

☑

: Digunakan Tetapkan gaya pengepala panel panel-heading

☑

: Digunakan untuk menetapkan gaya ekor panel 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:

dan panel-heading hanya mempunyai set jarak dan bucu bulat: panel-footer

Fail /bootstrap.css Baris 5006~Baris 5030/

.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

tidak menggayakan tema, tetapi gaya tema ditetapkan melalui panel sediakan. Selain gaya tema lalai, komponen panel dalam bingkai panel-default juga termasuk gaya tema berikut, membentuk panel berwarna: Bootstrap

☑

: Kekunci biru panel-primary

☑

: Kejayaan hijau panel-success

☑

: Maklumat biru panel-info

☑

: Amaran kuning panel-warning

☑

: Bahaya merah panel-danger

Kaedah penggunaan adalah 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: kod sumber tertentu boleh dilihat dalam fail
bootstrap.css baris 5195 ~ baris 5302 .

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 kita lihat contoh sahaja:

<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 larian adalah seperti berikut:

Kod dioptimumkan:

Sama seperti jadual bersarang , jika anda rasa Jarak ini 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 berjalan adalah seperti berikut:

Dengan cara yang sama. ,
akan bersarang Pengoptimuman gaya tertentu telah dibuat pada kumpulan senarai dalam panel. Kod sumber tertentu boleh dilihat dalam Bootstrap fail bootstrap.css baris 5031 hingga baris 5053 .

Untuk pengetahuan lanjut tentang bootstrap, sila lawati:

tutorial asas bootstrap! !

Atas ialah kandungan terperinci apakah itu panel bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!