Introducere în Panourile Bootstrap
Conținutul datelor trebuie să arate curat, îngrijit și adecvat. Având spațiu în conținut, antet și colorat colorat și bordură pentru conținut arată atractiv. Conținut atractiv este ușor de citit și înțeles. Panoul bootstrap funcționează exact similar pentru conținut. Se folosește pentru cutie de graniță pentru conținut cu captuseală specifică. Funcționează pentru conținut, antet, subsol și, de asemenea, într-o culoare diferită. Panoul de bootstrap de bază funcționează folosind clasa „.panel” într-un element div, cu această clasă ”.panel-default”.
Exemplu:
THIS IS A DEFAULT PANEL
ieşire:
Tipuri de panouri pentru bootstrap
Panourile sunt clasificate cu clasificări și obiective diferite, care este următorul. Conținutul are un titlu, corp și partea de subsol. Pentru a crea un conținut elegant și stil cu scop, panoul oferă aceste categorii:
1. Panou cu rubrica
În titlul panoului, cutie de bordură înconjurată cu titlu de conținut și corp de conținut cu căptușire de format. Panoul de intrare adăuga class = „panou-titlu” și corpul de conținut adaugă class = „panou-corp”.
Cod:
Content Heading
Content Body
ieşire:
Puteți adăuga clasa = „panel-title” pentru a modifica separat titlul conținutului. Această clasă este folosită rar, deoarece clasa de antet de panou modifică singure toate stilurile.
2. Panou cu subsol
În subsolul panoului, cutie de bordură înconjurată de subsol de conținut și corp de conținut cu umplutură format. Panoul de subsol add class = „panel-footer” și corpul conținut add class = „panel-body”.
Cod:
Content Body
Content Footer
ieşire:
3. Grup grup
Acest panou este utilizat pentru legarea multor panouri simultan. Îndepărtează marja panoului inferior și face un grup de panouri.
Cod:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
ieşire:
4. Panouri cu clase contextuale
Pentru a obține un cadru mai semnificativ, panoul de bootstrap proiectează clase diferite pentru context. Fiecare rubrică de clasă contextuală are o culoare diferită pentru a arăta impactul contextului. Aceste clase de panou sunt mai jos cu exemple și rezultate ale acestora,
- .panel-default: Acesta este panoul implicit utilizat pentru context.
Cod:
Content Heading
Content Body
ieşire:
- .panel-primar: Această clasă folosită pentru contextul primar înseamnă contexte principale.
Cod:
Content Heading with panel-primary class /div>
Content Body2
ieşire:
- .panel-succes: Această clasă este folosită atunci când un anumit context are semnificația succesului.
Cod:
Content Heading with panel-success class
Content Body3
ieşire:
- .panel-info: Această clasă este folosită atunci când un anumit context are informații.
Cod:
Content Heading with panel-info class
Content Body4
ieşire:
- .panel-Warning: Această clasă este utilizată atunci când anumite contexte au semnificația unui semn de avertizare.
Cod:
Content Heading with panel-warning class
Content Body5
ieşire:
- .panel-primejdie: această clasă este folosită atunci când un anumit context are semnificația pericolului și dorește să indice.
Cod:
Content Heading with panel-danger class
Content Body6
ieşire:
Exemple de panouri pentru bootstrap
Urmează exemplele panoul de bootstrap explicate în detaliu,
Exemplul # 1: Panou simplu pentru bootstrap
Acesta este un exemplu de panou implicit simplu pentru bootstrap, unde sunt plasate rubrica panoului, subsolul panoului și corpul descrierii.
Cod:
Content Heading
Content Body
Panel body for context
Content Footer
ieşire:
Exemplul nr. 2: Panou de bootstrap cu tabel
- În acest exemplu obțineți ieșirea tabelului folosind panoul bootstrap. Masa poate fi modificată pentru a arăta elegant. Următorul exemplu și ieșire este tabelul folosind panoul bootstrap.
- Acest exemplu are nevoie de o clasă de masă pentru a face o masă. Aceasta face ca clasele de antet și primele să păstreze un nume de tabel
- Clasa de masă vine cu o clasă de corp de panou. În acest tabel, sunt plasate antetul tabelului și datele tabelului.
Cod:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
