Introduktion til Bootstrap-paneler
Indholdet af data skal være rent, pænt og passende. Det er attraktivt at have plads i indholdet, en farverig header og sidefod og ramme for indhold. Attraktivt indhold er let at læse og forstå. Bootstrap-panel fungerer nøjagtigt ens for indhold. Det bruges til kantboks til indhold med specifik polstring. Det fungerer til indhold, header, sidefod og også i en anden farve. Grundlæggende bootstrap-panel arbejde med ”.panel” -klassen i et div-element, med denne klasse ”.panel-default” -klasse kræves også.
Eksempel:
THIS IS A DEFAULT PANEL
Produktion:
Typer af bootstrap-paneler
Paneler kategoriseres med forskellige klassificeringer og mål, som er følgende. Indholdet har en overskrift, krop og foddel. For at fremstille elegant indhold og stil med det formål kommer panelet med disse kategorier:
1. Panel med overskriften
I paneloverskrift, kantboks omgivet af indholdsoverskrift og indholdsdel med formatpolstring Overskrift panel tilføj klasse = "panel-overskrift" og indhold body tilføj klasse = "panel-body".
Kode:
Content Heading
Content Body
Produktion:
Du kan tilføje class = “panel-title” for at ændre overskriften på indholdet separat. Denne klasse bruges sjældent, fordi panelets overskriftsklasse ændrer alle stilarter af sig selv.
2. Panel med sidefod
I sidefod, kantboks omgivet med indholdsfortegnelse og indholdsdel med formatpolstring. Sidefodpanel tilføj klasse = "panel-sidefod" og indholdsdel tilføj klasse = "panel-krop".
Kode:
Content Body
Content Footer
Produktion:
3. Panelgruppe
Dette panel bruges til at binde de mange paneler ad gangen. Det fjerner margen på det nederste panel og udgør en gruppe paneler.
Kode:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Produktion:
4. Paneler med kontekstuelle klasser
For at få et mere meningsfuldt panel med opstartsstrap design forskellige klasser til kontekst. Hver kontekstuel klasseoverskrift har en anden farve for at vise indvirkningen af kontekst. Disse panelklasser er nedenfor med deres eksempler og output,
- .panel-default: Dette er standardpanelet, der bruges til sammenhæng.
Kode:
Content Heading
Content Body
Produktion:
- .panel-primær: Denne klasse, der bruges til primær kontekst, betyder hovedkontekster.
Kode:
Content Heading with panel-primary class /div>
Content Body2
Produktion:
- .panel-succes: Denne klasse bruges, når en eller anden kontekst har betydningen af succes.
Kode:
Content Heading with panel-success class
Content Body3
Produktion:
- .panel-info: Denne klasse bruges, når en eller anden kontekst er informativ.
Kode:
Content Heading with panel-info class
Content Body4
Produktion:
- .panel-advarsel: Denne klasse bruges, når en eller anden kontekst har betydningen af et advarselsskilt.
Kode:
Content Heading with panel-warning class
Content Body5
Produktion:
- .panel-fare: Denne klasse bruges, når en eller anden kontekst har betydningen af fare og ønsker at indikere.
Kode:
Content Heading with panel-danger class
Content Body6
Produktion:
Eksempler på Bootstrap-paneler
Følgende er eksemplerne på bootstrap-panelet forklaret detaljeret,
Eksempel 1: Simple Bootstrap Panel
Dette er et simpelt eksempel på bootstrap-standardpanel, hvor placeret paneloverskrift, paneloverskrift og beskrivelsesdel.
Kode:
Content Heading
Content Body
Panel body for context
Content Footer
Produktion:
Eksempel 2: Bootstrap Panel med tabel
- I dette eksempel kan du få output fra tabellen ved hjælp af bootstrap-panelet. Bordet kan ændres til at se elegant ud. Følgende eksempel og output er tabellen ved hjælp af bootstrap-panelet.
- Dette eksempel har brug for en bordklasse for at lave en tabel. Det gør, at primær- og paneloverskriftsklasse holder et bordnavn.
- Bordklassen leveres med en panelkropsklasse. I denne tabel placeres tabeloverskrift og tabeldata.
Kode:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
