Introduksjon til Bootstrap Panels
Innholdet i data må være rent, pent og passende. Å ha plass i innholdet, fargerik topptekst og bunntekst og grensen for innhold ser attraktivt ut. Attraktivt innhold er enkelt for lesing og forståelse. Bootstrap-panelet fungerer nøyaktig likt for innhold. Den brukes til kantboks for innhold med spesifikk polstring. Det fungerer for innhold, topptekst, bunntekst og også i en annen farge. Grunnleggende bootstrap panel arbeid med ".panel" klasse i et div element, med denne klassen ".panel-default" klassen også nødvendig.
Eksempel:
THIS IS A DEFAULT PANEL
Produksjon:
Typer Bootstrap Panels
Paneler er kategorisert med forskjellige klassifiseringer og mål som er følgende. Innhold har en overskrift, kropp og bunntekst. For å lage elegant innhold og stil med formål, kommer panelet med disse kategoriene:
1. Panel med overskriften
I paneloverskrift, kantboks omgitt av innholdsoverskrift og innholdsdel med formatpolstring. Overskrift panel legge til klasse = "panel-overskrift" og content body add class = "panel-body".
Kode:
Content Heading
Content Body
Produksjon:
Du kan legge til class = “panel-title” for å endre overskriften på innholdet separat. Denne klassen brukes sjelden fordi panelets overskriftsklasse endrer alle stiler av seg selv.
2. Panel med bunntekst
I bunntekst, kantboks omgitt av innholdsbunntekst og innholdsdel med formatpolstring. Bunntekstpanel legg til klasse = “panel-bunntekst” og innholdsdel legger til klasse = “panel-kropp”.
Kode:
Content Body
Content Footer
Produksjon:
3. Panelgruppe
Dette panelet brukes til å binde de mange panelene om gangen. Det fjerner margen på det nedre panelet og lager en gruppe paneler.
Kode:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Produksjon:
4. Paneler med kontekstuelle klasser
For å få en mer meningsfull kontekst bootstrap panel designe forskjellige klasser for kontekst. Hver kontekstuell klassetittel har en annen farge for å vise virkningen av kontekst. Disse panelklassene er nedenfor med sine eksempler og utganger,
- .panel-default: Dette er standardpanelet som brukes til kontekst.
Kode:
Content Heading
Content Body
Produksjon:
- .panel-primær: Denne klassen som brukes til primær kontekst betyr hovedkontekster.
Kode:
Content Heading with panel-primary class /div>
Content Body2
Produksjon:
- .panel-success: Denne klassen brukes når en eller annen kontekst har betydningen av suksess.
Kode:
Content Heading with panel-success class
Content Body3
Produksjon:
- .panel-info: Denne klassen brukes når noen kontekst har informativ.
Kode:
Content Heading with panel-info class
Content Body4
Produksjon:
- .panel-advarsel: Denne klassen brukes når en eller annen kontekst har betydningen av et advarselsskilt.
Kode:
Content Heading with panel-warning class
Content Body5
Produksjon:
- .panel-fare: Denne klassen brukes når en eller annen kontekst har betydningen av fare og ønsker å indikere.
Kode:
Content Heading with panel-danger class
Content Body6
Produksjon:
Eksempler på Bootstrap-paneler
Følgende er eksemplene på bootstrap-panelet forklart i detalj,
Eksempel 1: Enkel Bootstrap Panel
Dette er et enkelt eksempel på bootstrap-standardpanel der plassert paneloverskrift, panelfotfeste og beskrivelsesdel.
Kode:
Content Heading
Content Body
Panel body for context
Content Footer
Produksjon:
Eksempel 2: Bootstrap Panel med tabell
- I dette eksemplet kan du få utdataene fra tabellen ved hjelp av bootstrap-panelet. Bordet kan modifiseres for å se elegant ut. Følgende eksempel og utdata er tabellen ved hjelp av bootstrap-panelet.
- Dette eksemplet trenger en tabellklasse for å lage et bord. Det gjør at hoved- og paneloverskrift holder et tabellnavn.
- Bordklassen har en panelklasse. I denne tabellen er tabelloverskrift og tabelldata plassert.
Kode:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
