Úvod do Bootstrap panelů
Obsah údajů musí být čistý, čistý a vhodný. Mít prostor v obsahu, barevné záhlaví a zápatí a ohraničení obsahu vypadá atraktivně. Atraktivní obsah je snadno čitelný a srozumitelný. Panel Bootstrap funguje přesně pro obsah. Používá se pro ohraničení obsahu s konkrétním polstrováním. Funguje pro obsah, záhlaví, zápatí a také v jiné barvě. Základní panel bootstrap funguje pomocí třídy „.panel“ v prvku div, s touto třídou „.panel-default“ také vyžadovanou.
Příklad:
THIS IS A DEFAULT PANEL
Výstup:
Typy Bootstrap panelů
Panely jsou rozděleny do kategorií podle různých klasifikací a cílů, což je následující. Obsah má nadpis, část těla a zápatí. Aby byl elegantní a účelný účel a účel, panel přichází s těmito kategoriemi:
1. Panel s nadpisem
V záhlaví panelu je ohraničení ohraničeno nadpisem obsahu a tělem obsahu s výplní formátu. Panel nadpisu přidat třídu = „panel-nadpis“ a obsah přidat třídu = „panel-tělo“.
Kód:
Content Heading
Content Body
Výstup:
Můžete přidat třídu = „panel-title“ a upravit nadpis záhlaví samostatně. Tato třída se používá zřídka, protože třída záhlaví panelu sama upravuje všechny styly.
2. Panel s zápatí
V zápatí panelu je ohraničení ohraničeno zápatím obsahu a tělem obsahu s vycpávkou formátu. Panel zápatí add class = „panel-footer“ a obsah content add class = „panel-body“.
Kód:
Content Body
Content Footer
Výstup:
3. Skupina panelů
Tento panel se používá k vázání mnoha panelů najednou. Odstraňuje okraj spodního panelu a vytváří skupinu panelů.
Kód:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Výstup:
4. Panely s kontextovými třídami
Chcete-li získat smysluplnější kontextový panel bootstrap, navrhněte různé třídy kontextu. Každý nadpis kontextové třídy má jinou barvu, aby ukázal dopad kontextu. Tyto třídy panelů jsou níže s jejich příklady a výstupy,
- .panel-default: Toto je výchozí panel používaný pro kontext.
Kód:
Content Heading
Content Body
Výstup:
- .panel-primární: Tato třída použitá pro primární kontext znamená hlavní kontexty.
Kód:
Content Heading with panel-primary class /div>
Content Body2
Výstup:
- .panel-success: Tato třída se používá, když nějaký kontext má význam úspěchu.
Kód:
Content Heading with panel-success class
Content Body3
Výstup:
- .panel-info: Tato třída se používá, když má nějaký kontext informativní.
Kód:
Content Heading with panel-info class
Content Body4
Výstup:
- .panel-warning: Tato třída se používá, když nějaký kontext má význam varovného znamení.
Kód:
Content Heading with panel-warning class
Content Body5
Výstup:
- .panel-danger: Tato třída se používá, když nějaký kontext má význam nebezpečí a chce jej označit.
Kód:
Content Heading with panel-danger class
Content Body6
Výstup:
Příklady panelů Bootstrap
Následuje podrobný popis příkladů zaváděcího panelu,
Příklad č. 1: Simple Bootstrap Panel
Toto je jednoduchý příklad výchozího zaváděcího systému, kde jsou umístěny záhlaví panelu, zápatí panelu a tělo popisu.
Kód:
Content Heading
Content Body
Panel body for context
Content Footer
Výstup:
Příklad č. 2: Bootstrap panel s tabulkou
- V tomto příkladu získejte výstup tabulky pomocí bootstrap panelu. Stůl lze upravit tak, aby vypadal elegantně. Následující příklad a výstup je tabulka používající panel bootstrap.
- Tento příklad potřebuje k vytvoření tabulky třídu tabulky. Díky tomu primární třída a třída nadpisu panelu zachovává název tabulky.
- Třída stolu přichází s třídou těla panelu. V této tabulce jsou umístěny záhlaví tabulky a data tabulky.
Kód:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
