Bootstrap-paneelide tutvustus
Andmete sisu peab olema puhas, puhas ja sobiv. Sisul ruumi, värvilist päist ja jalat ning sisu ääris tundub atraktiivne. Atraktiivset sisu on kerge lugeda ja mõista. Bootstrap-paneel töötab sisu osas täpselt sarnaselt. Seda kasutatakse konkreetse polstriga sisu äärise jaoks. See töötab sisu, päise, jaluse jaoks ja ka erinevat värvi. Põhiline alglaadimispaneeli töö, kasutades div-elemendis klassi “.panel”, kusjuures nõutav on ka klass “.panel-default”.
Näide:
THIS IS A DEFAULT PANEL
Väljund:
Bootstrap-paneelide tüübid
Paneele liigitatakse erinevate klassifikatsioonide ja eesmärkide abil, mis on järgmine. Sisu sisaldab pealkirja, keha ja jaluse osa. Elegantse sisu ja stiili otstarbekaks muutmiseks on paneelil järgmised kategooriad:
1. Paneel pealkirjaga
Paneeli pealkirjas ääriskarp, mis on ümbritsetud sisu pealkirjaga, ja sisu korpus koos formaadis polsterdusega. Päisepaneel lisada klass = “paneeli pealkiri” ja sisu korpus lisada klass = “paneeli korpus”.
Kood:
Content Heading
Content Body
Väljund:
Sisu pealkirja eraldi muutmiseks võite lisada klassi = „paneeli pealkiri”. Seda klassi kasutatakse harva, kuna paneeli pealkirjaklass muudab kõiki stiile ise.
2. Paneel jalusega
Paneeli jaluses, ääriseboks ümbritsetud sisujalgaga ja sisu korpus vormingu polsterdusega. Jaluse paneel lisab klassi = “paneeli jalus” ja sisukorpus lisa klass = “paneeli korpus”.
Kood:
Content Body
Content Footer
Väljund:
3. Paneelirühm
Seda paneeli kasutatakse paljude paneelide sidumiseks korraga. See eemaldab alumise paneeli veerise ja moodustab paneelide rühma.
Kood:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Väljund:
4. Kontekstuaalsete klassidega paneelid
Mõistlikuma konteksti saamiseks laadige alglaadimispaneel välja erinevad klassid konteksti jaoks. Igal kontekstiklassi pealkirjal on erinev mõju, et näidata konteksti mõju. Need paneeliklassid on allpool koos nende näidete ja väljunditega,
- .panel-default: see on kontekstis kasutatav vaikepaneel .
Kood:
Content Heading
Content Body
Väljund:
- .paneeli-primaarne: see primaarse konteksti jaoks kasutatav klass tähendab peamisi kontekste.
Kood:
Content Heading with panel-primary class /div>
Content Body2
Väljund:
- .paneeli edukus: Seda klassi kasutatakse siis, kui mõnes kontekstis on edu tähendus.
Kood:
Content Heading with panel-success class
Content Body3
Väljund:
- .panel-info: Seda klassi kasutatakse siis, kui mõnes kontekstis on informatiivne teave.
Kood:
Content Heading with panel-info class
Content Body4
Väljund:
- .paneeli hoiatus: Seda klassi kasutatakse siis, kui mõnes kontekstis on hoiatusmärk.
Kood:
Content Heading with panel-warning class
Content Body5
Väljund:
- .paneeli oht: Seda klassi kasutatakse juhul, kui mõnel kontekstil on ohu tähendus ja ta soovib seda näidata.
Kood:
Content Heading with panel-danger class
Content Body6
Väljund:
Bootstrap-paneelide näited
Järgnevalt on üksikasjalikult lahti seletatud alglaadimispaneeli näited,
Näide # 1: lihtne alglaadimispaneel
See on lihtne alglaadimise vaikimisi paneeli näide, kuhu paigutatakse paneeli pealkiri, paneeli jalus ja kirjeldus.
Kood:
Content Heading
Content Body
Panel body for context
Content Footer
Väljund:
Näide 2: Bootstrap Panel with Table
- Selles näites saate tabeli väljundi alglaadimispaneeli abil. Lauda saab muuta elegantseks. Järgmine näide ja väljund on alglaadimispaneeli kasutav tabel.
- See näide vajab tabeli valmistamiseks tabeliklassi. See muudab esmase ja paneeli rubriigi klassi tabeli nime hoidmiseks.
- Lauaklass tuleb välja paneelkorpuse klassiga. Sellesse tabelisse paigutatakse tabeli päis ja andmed.
Kood:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
