Uvod u bootstrap panele
Sadržaj podataka mora biti čist, uredan i prikladan. Prostor u sadržaju, živopisno zaglavlje i podnožje i obrub sadržaja izgledaju privlačno. Atraktivni sadržaj jednostavan je za čitanje i razumijevanje. Ploča za pokretanje sustava djeluje sasvim slično sadržaju. Koristi se kao okvir za sadržaj s određenim paddingom. Radi za sadržaj, zaglavlje, podnožje i također u drugoj boji. Osnovni rad ploče za pokretanje sustava pomoću klase ".panel" u elementu div, s ovom razredom također je potreban razred ".panel-default".
Primjer:
THIS IS A DEFAULT PANEL
Izlaz:
Vrste bootstrap panela
Ploče su kategorizirane s različitim klasifikacijama i ciljevima koji su sljedeći. Sadržaj ima dio zaglavlja, tijela i podnožja Da bi elegantan sadržaj i stil učinio svrsishodnim, ploča sadrži ove kategorije:
1. Ploča s naslovom
U zaglavlju ploče, okvir s okvirom okružen naslovom i tijelom sadržaja s padom formata. Ploča zaglavlja add class = „naslov ploče“ i tijelo sadržaja add class = „tijelo ploče“.
Kodirati:
Content Heading
Content Body
Izlaz:
Možete dodati class = „naslov ploče“ da biste zasebno izmjenili naslov sadržaja. Ova se klasa koristi rijetko jer klasa zaglavlja na ploči sama mijenja sve stilove.
2. Ploča s podnožjem
U podnožju ploče, okvir sa okvirom okružen podnožjem podnožja i tijelom sadržaja s padom formata. Ploča podnožja dodavanja klase = "podnožje ploče" i tijela sadržaja dodaj klasu = "tijelo-ploče".
Kodirati:
Content Body
Content Footer
Izlaz:
3. Panel grupa
Ova ploča koristi se za vezanje mnogih ploča odjednom. Uklanja rub ruba donje ploče i čini grupu panela.
Kodirati:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Izlaz:
4. Ploče s kontekstualnim klasama
Da biste dobili smisleniji kontekst dizajn bootstrap ploče različite klase za kontekst. Svaki naslov kontekstualne klase ima različitu boju kako bi se prikazao utjecaj konteksta. Ove klase ploča su u nastavku s njihovim primjerima i izlazima,
- .panel-default: Ovo je zadana ploča koja se koristi za kontekst.
Kodirati:
Content Heading
Content Body
Izlaz:
- .panel-Primary: Ova klasa koja se koristi za primarni kontekst znači glavni kontekst.
Kodirati:
Content Heading with panel-primary class /div>
Content Body2
Izlaz:
- .panel-uspjeh: Ova klasa se koristi kada neki kontekst ima značenje uspjeha.
Kodirati:
Content Heading with panel-success class
Content Body3
Izlaz:
- .panel-info: Ova klasa se koristi kada neki kontekst ima informativan.
Kodirati:
Content Heading with panel-info class
Content Body4
Izlaz:
- .panel-upozorenje: Ova klasa se koristi kada neki kontekst ima značenje znaka upozorenja.
Kodirati:
Content Heading with panel-warning class
Content Body5
Izlaz:
- .panel-nevarnost: Ova klasa se koristi kada neki kontekst ima značenje opasnosti i želi ga naznačiti.
Kodirati:
Content Heading with panel-danger class
Content Body6
Izlaz:
Primjeri panela za pokretanje
Slijedi primjere panela za pokretanje sustava za pokretanje, koji su detaljno objašnjeni,
Primjer # 1: Jednostavna ploča za pokretanje
Ovo je jednostavan primjer zadane ploče za pokretanje sustava gdje se postavljaju naslov ploče, podnožje panela i tijelo opisa.
Kodirati:
Content Heading
Content Body
Panel body for context
Content Footer
Izlaz:
Primjer # 2: Ploča za pokretanje sustava sa tablicom
- U ovom primjeru dobijte izlaz tablice pomoću ploče za pokretanje. Stol se može modificirati tako da izgleda elegantno. Sljedeći je primjer i rezultat tablice pomoću ploče za pokretanje.
- U ovom primjeru potrebna je tablica klase za izradu tablice. To čini da primarna klasa i klasa naslova vodi naziv tablice.
- Klasa tablice nudi se i klasa karoserije na ploči. U ovu su tablicu smješteni zaglavlje i podaci tablice.
Kodirati:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
