Bevezetés a rendszerindító panelekbe
Az adatok tartalmának tiszta, tiszta és megfelelőnek kell lennie. Ha tartalom van, színes fejléc és lábléc, valamint a tartalom szegélye vonzó. A vonzó tartalom könnyen olvasható és megérthető. A rendszerindító panel tartalmához hasonlóan működik. Speciális párnázattal ellátott tartalmak keretéhez használják. Tartalomra, fejlécre, láblécre és más színűre is működik. Az alapszintű indítópanel munka a „.panel” osztály használatával egy div elemben, ehhez a „.panel-default” osztályhoz is szükség van.
Példa:
THIS IS A DEFAULT PANEL
Kimenet:
A rendszerindító panelek típusai
A paneleket különböző besorolásokkal és célokkal kategorizáljuk, amely a következő. A tartalomnak címsor, törzs és lábléc van. Az elegáns tartalom és stílus céltudatos kialakításához a panelen a következő kategóriák találhatók:
1. Panel a fejlécgel
A panel fejlécében a szegélydoboz tartalmi címsorral és a tartalom törzsével formátumok kitöltésével. A fejléc panel hozzáadása osztály = “panel-fejléc” és a tartalom törzs hozzáadása osztály = “panel-test”.
Kód:
Content Heading
Content Body
Kimenet:
A class = “panel-title” hozzáadásával módosíthatja a tartalom fejlécét. Ezt az osztályt ritkán használják, mert a panel fejléc osztálya módosítja az összes stílust.
2. Panel láblésszel
Paneles láblécben, szegélydobozban, tartalmi lábléccel körülvéve, és tartalomtestet formátum-párnázattal. A lábléc panel add class = “panel-lábléc” és a tartalom test add class = “panel-test”.
Kód:
Content Body
Content Footer
Kimenet:
3. Panel csoport
Ezt a panelt a sok panel egyidejű összefűzésére használják. Eltávolítja az alsó panel margóját, és panelekből álló csoportot alkot.
Kód:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Kimenet:
4. Kontextuális osztályokkal ellátott panelek
Értelmesebb kontextus elérése érdekében a rendszerindító panel tervezzen különféle osztályokat a kontextus számára. Minden összefüggő osztálycím különböző színű, hogy megmutatja a kontextus hatását. Ezek a panelosztályok az alábbiakban vannak példáikkal és kimeneteikkel,
- .panel-default: Ez a kontextushoz használt alapértelmezett panel.
Kód:
Content Heading
Content Body
Kimenet:
- .panel-primer: Ez az elsődleges kontextushoz használt osztály fő kontextust jelent.
Kód:
Content Heading with panel-primary class /div>
Content Body2
Kimenet:
- .panel-siker: Ezt az osztályt akkor használják, ha valamilyen kontextusban a siker jelentése van.
Kód:
Content Heading with panel-success class
Content Body3
Kimenet:
- .panel-info: Ezt az osztályt akkor használják, ha bizonyos kontextus informatív.
Kód:
Content Heading with panel-info class
Content Body4
Kimenet:
- .panel-figyelmeztetés: Ezt az osztályt akkor használják, ha valamilyen környezetben van egy figyelmeztető jel jelentése.
Kód:
Content Heading with panel-warning class
Content Body5
Kimenet:
- .panel-veszély: Ezt az osztályt akkor használják, ha valamilyen kontextusnak a veszély jelentése van, és jelezni akarja.
Kód:
Content Heading with panel-danger class
Content Body6
Kimenet:
Példák a Bootstrap panelekre
Az alábbiakban bemutatjuk a rendszerindító panel részleteit,
1. példa: Egyszerű Bootstrap Panel
Ez egy egyszerű bootstrap alapértelmezett paneles példa, ahol az elhelyezett panel fejléce, a lábléc és a leírás törzs található.
Kód:
Content Heading
Content Body
Panel body for context
Content Footer
Kimenet:
2. példa: Bootstrap panel és táblázat
- Ebben a példában szerezze be a tábla kimenetét a bootstrap panelen. Az asztal módosítható, hogy elegáns megjelenésű legyen. A következő példa és a kimenet a bootstrap panelt használó táblázat.
- Ez a példa táblázati osztályt igényel a táblázat elkészítéséhez. Ez teszi az elsődleges és a panel fejléc osztály tartja a tábla nevét.
- Az asztalosztály felvesz egy paneles karosszéria osztályt. Ebben a táblázatban a táblázat fejléce és a tábla adatai vannak elhelyezve.
Kód:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
