Úvod do panelov Bootstrap
Obsah údajov musí byť čistý, čistý a vhodný. Mať priestor v obsahu, farebné hlavičky a päty a hranice obsahu vyzerá atraktívne. Atraktívny obsah je ľahko čitateľný a zrozumiteľný. Panel Bootstrap funguje presne pre obsah. Používa sa na ohraničenie obsahu s konkrétnym vypchávkou. Funguje pre obsah, hlavičku, pätu a tiež v inej farbe. Základná práca na paneli bootstrap funguje pomocou triedy „.panel“ v prvku div, pričom sa vyžaduje aj táto trieda „.panel-default“.
Príklad:
THIS IS A DEFAULT PANEL
Výkon:
Druhy panelov Bootstrap
Panely sú rozdelené do kategórií s rôznymi klasifikáciami a cieľmi, ktoré sú uvedené ďalej. Obsah má nadpis, časť tela a pätu. S cieľom vytvoriť elegantný obsah a štýl s účelom, panel prichádza s týmito kategóriami:
1. Panel s nadpisom
V záhlaví panela je rámček ohraničený nadpisom obsahu a telom obsahu s výplňou formátu. Panel nadpisu pridať triedu = „názov panela“ a telo obsahu pridať triedu = „panel telo“.
kód:
Content Heading
Content Body
Výkon:
Môžete pridať class = „panel-title“, aby ste hlavičku obsahu upravili osobitne. Táto trieda sa používa zriedka, pretože trieda nadpisu panela upravuje všetky štýly sama o sebe.
2. Panel s pätou
V päte panela je ohraničenie ohraničené pätou obsahu a telo obsahu s výplňou formátu. Panel päty add class = “panel-footer” a content content add class = “panel-body”.
kód:
Content Body
Content Footer
Výkon:
3. Skupina panelov
Tento panel sa používa na spájanie viacerých panelov súčasne. Odstraňuje okraj spodného panela a vytvára skupinu panelov.
kód:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Výkon:
4. Panely s kontextovými triedami
Ak chcete získať zmysluplnejší kontextový panel bootstrap, navrhnite rôzne triedy kontextu. Každý nadpis kontextovej triedy má inú farbu, aby ukázal vplyv kontextu. Tieto triedy panelov sú uvedené nižšie s ich príkladmi a výstupmi,
- .panel-default: Toto je predvolený panel používaný pre kontext.
kód:
Content Heading
Content Body
Výkon:
- .panel-primárne: Táto trieda použitá v primárnom kontexte znamená hlavné kontexty.
kód:
Content Heading with panel-primary class /div>
Content Body2
Výkon:
- .panel-success: Táto trieda sa používa, keď má nejaký kontext význam úspechu.
kód:
Content Heading with panel-success class
Content Body3
Výkon:
- .panel-info: Táto trieda sa používa, keď má nejaký kontext informatívny charakter.
kód:
Content Heading with panel-info class
Content Body4
Výkon:
- .panel-warning: Táto trieda sa používa, keď nejaký kontext má význam výstražnej značky.
kód:
Content Heading with panel-warning class
Content Body5
Výkon:
- .panel-danger: Táto trieda sa používa, keď nejaký kontext má význam nebezpečenstva a chce to naznačiť.
kód:
Content Heading with panel-danger class
Content Body6
Výkon:
Príklady panelov Bootstrap
Nasleduje podrobný popis príkladov panela bootstrap,
Príklad č. 1: Panel Simple Bootstrap
Toto je jednoduchý predvolený príklad zavádzacieho panela, kde sú umiestnené záhlavia panela, päta panelu a telo popisu.
kód:
Content Heading
Content Body
Panel body for context
Content Footer
Výkon:
Príklad č. 2: Bootstrap panel s tabuľkou
- V tomto príklade získajte výstup tabuľky pomocou panela bootstrap. Stôl je možné upraviť tak, aby vyzeral elegantne. Nasledujúci príklad a výstup je tabuľka používajúca panel bootstrap.
- V tomto príklade je na vytvorenie tabuľky potrebná trieda tabuľky. Vďaka tomu primárna trieda a trieda nadpisov panelov zachovajú názov tabuľky.
- Trieda tabuľky prichádza s triedou tela panela. V tejto tabuľke sú umiestnené hlavičky tabuľky a dáta tabuľky.
kód:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
