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

) 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

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

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>

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

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>

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

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

: panel

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

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 .

<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>

Kod dioptimumkan:

<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>

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 .

tutorial asas bootstrap! !

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