Introduktion till Bootstrap-paneler
Innehållet i data måste vara rent, snyggt och lämpligt. Att ha utrymme i innehåll, färgstark sidhuvud och sidfot och gränsen för innehåll ser attraktivt ut. Attraktivt innehåll är lätt att läsa och förstå. Bootstrap-panelen fungerar exakt lika med innehåll. Det används för gränsruta för innehåll med specifik stoppning. Det fungerar för innehåll, sidhuvud, sidfot och även i en annan färg. Grundläggande bootstrap-panel med ".panel" -klassen i ett div-element, med denna klass ".panel-default" -klass krävs också.
Exempel:
THIS IS A DEFAULT PANEL
Produktion:
Typer av Bootstrap-paneler
Paneler kategoriseras med olika klassificeringar och mål som är följande. Innehållet har en rubrik, kropp och sidfotdel. För att göra elegant innehåll och stil med syfte, kommer panelen med följande kategorier:
1. Panel med rubriken
I panelen rubrik, gränsruta omgiven med innehållsrubrik och innehållsdel med formstoppning. Rubrikpanel lägg till klass = "panel-rubrik" och innehållsdel lägg till klass = "panel-kropp".
Koda:
Content Heading
Content Body
Produktion:
Du kan lägga till class = “panel-title” för att ändra rubriken på innehåll separat. Denna klass används sällan eftersom panelen rubrik klassen ändrar alla stilar av sig själva.
2. Panel med sidfot
I panelfot, gränsruta omgiven av innehållsfot och innehållsdel med formad polstring. Sidfotpanel lägg till klass = "panelfot" och innehållsdel lägg till klass = "panel-kropp".
Koda:
Content Body
Content Footer
Produktion:
3. Panelgrupp
Den här panelen används för att binda de många panelerna åt gången. Det tar bort marginalen på den nedre panelen och gör en grupp paneler.
Koda:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Produktion:
4. Paneler med kontextuella klasser
För att få en mer meningsfull kontext bootstrap-panel designar du olika klasser för kontext. Varje kontextuell klassrubrik har en annan färg för att visa påverkan av kontext. Dessa panelklasser finns nedan med sina exempel och utgångar,
- .panel-default: Detta är standardpanelen som används för kontext.
Koda:
Content Heading
Content Body
Produktion:
- .panel-primär: Den här klassen som används för primärt sammanhang betyder huvudsammanhang.
Koda:
Content Heading with panel-primary class /div>
Content Body2
Produktion:
- .panel-success: Den här klassen används när vissa sammanhang har betydelsen av framgång.
Koda:
Content Heading with panel-success class
Content Body3
Produktion:
- .panel-info: Denna klass används när vissa sammanhang har informativt.
Koda:
Content Heading with panel-info class
Content Body4
Produktion:
- .panel-varning: Den här klassen används när vissa sammanhang har en varningstecken.
Koda:
Content Heading with panel-warning class
Content Body5
Produktion:
- .panel-fare: Denna klass används när vissa sammanhang har betydelsen av fara och vill ange.
Koda:
Content Heading with panel-danger class
Content Body6
Produktion:
Exempel på Bootstrap-paneler
Följande är exemplen på bootstrap-panelen som förklaras i detalj,
Exempel 1: Enkel Bootstrap-panel
Detta är ett enkelt exempel på bootstrap-standardpanel där placerad panelrubrik, panelfotfot och beskrivningskropp.
Koda:
Content Heading
Content Body
Panel body for context
Content Footer
Produktion:
Exempel 2: Bootstrap Panel med tabell
- I det här exemplet får du utgången från tabellen med hjälp av bootstrap-panelen. Bordet kan modifieras så att det ser elegant ut. Följande exempel och utgång är tabellen med hjälp av bootstrap-panelen.
- Detta exempel behöver en tabellklass för att skapa en tabell. Det gör att primär- och panelrubrikklassen behåller ett bordnamn.
- Bordsklassen har en panelklasse. I denna tabell placeras tabellrubrik och tabeldata.
Koda:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
