Uvod v zagonske plošče

Vsebina podatkov mora biti čista, čista in primerna. Prostor v vsebini, barvita glava in podnožje ter obroba vsebine izgledajo privlačno. Privlačna vsebina je enostavna za branje in razumevanje. Bootstrap plošča deluje natančno podobno kot vsebina. Uporablja se za mejni okvir za vsebino s posebnimi oblazinjenji. Deluje za vsebino, glavo, nogo in tudi v drugi barvi. Osnovno delo zagonske plošče z uporabo razreda.

Primer:


THIS IS A DEFAULT PANEL

Izhod:

Vrste plošč za začetno uporabo

Plošče so razvrščene z različnimi klasifikacijami in cilji, ki so naslednji. Vsebina ima del naslova, telesa in podnožja. Za oblikovanje elegantne vsebine in sloga na plošči je na voljo naslednje kategorije:

1. Plošča z naslovom

V naslovu plošče je polje z obrobo obdano z naslovom vsebine in telesom vsebine s formatom oblazinjenja. Nadzorna plošča dodaj razred = „naslov plošče“ in vsebino dodaj razred = „telo plošče“.

Koda:


Content Heading
Content Body

Izhod:

Če želite spremeniti naslov vsebine, lahko dodate razred = „naslov plošče“. Ta razred se uporablja redko, ker razred naslova plošče samodejno spremeni vse sloge.

2. Plošča s footerjem

V spodnjem podnožju plošče je obrobje obdano z nogo vsebine in telesom vsebine s formatom oblazinjenja. Plošča podnožja dodaj razred = "plošča-footer" in vsebino dodaj razred = "telo-plošča".

Koda:


Content Body
Content Footer

Izhod:

3. Panelna skupina

Ta plošča se uporablja za vezavo številnih plošč hkrati. Odstrani rob spodnjega panela in naredi skupino plošč.

Koda:


Content Body1

Content Heading
Content Body

Content Body3
Content Footer

Izhod:

4. Plošče s kontekstnimi razredi

Da bi dobili bolj smiselno zasnovo zagonske plošče zasnujte različne razrede za kontekst. Vsak naslov kontekstnega razreda ima drugačno barvo, da prikaže vpliv konteksta. Spodaj so ti razredi plošč s primeri in izhodi,

  • .panel-default: To je privzeta plošča, ki se uporablja za kontekst.

Koda:


Content Heading
Content Body

Izhod:

  • .panel-Primary: Ta razred, ki se uporablja za primarni kontekst, pomeni glavni kontekst.

Koda:


Content Heading with panel-primary class /div>
Content Body2

Izhod:

  • .panel-success: Ta razred se uporablja, kadar ima nek kontekst pomen uspeha.

Koda:


Content Heading with panel-success class
Content Body3

Izhod:

  • .panel-info: Ta razred se uporablja, kadar ima nek kontekst informativen.

Koda:


Content Heading with panel-info class
Content Body4

Izhod:

  • .panel-Warning: Ta razred se uporablja, kadar ima nek kontekst pomen opozorilnega znaka.

Koda:


Content Heading with panel-warning class
Content Body5

Izhod:

  • .panel-nevarnost: Ta razred se uporablja, kadar ima nek kontekst pomen nevarnosti in ga želi navesti.

Koda:


Content Heading with panel-danger class
Content Body6

Izhod:

Primeri plošč za začetno uporabo

Sledijo primeri podrobne razlage plošče za zagon strani,

Primer # 1: Preprosta zagonska plošča

To je preprost primer privzete plošče za zagonske plošče, kjer so postavljeni naslov plošče, podnožje plošče in opisno telo.

Koda:


Content Heading
Content Body
Panel body for context
Content Footer

Izhod:

Primer # 2: Plošča za zagon zagona s tabelo

  • V tem primeru dobite izhod tabele s pomočjo zagonske plošče. Miza je lahko spremenjena tako, da izgleda elegantno. Naslednji primer in izhod je tabela s pomočjo zagonske plošče.
  • Ta primer potrebuje tabelni razred za izdelavo tabele. Omogoča, da osnovni razred in razdelek naslova tabele ohranja ime tabele.
  • Razred tabele je sestavljen s telesnim razredom plošče. V to tabelo so postavljene glave tabele in podatki tabel.

Koda:


Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700


Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Izhod:

Primer # 3: Plošča za zagon s seznamom

  • Ta primer je podoben tabeli, vendar je edina sprememba ta, da seznam deluje namesto tabele. v tem primeru je uporabljen razred panel-info.
  • Za ime seznama se uporablja naslov plošče.
  • Ta primer predstavlja neurejen seznam v razredu telesa plošče z majhnim opisom.

Koda:


Panels with Contextual Classes
List Name


Panels with Contextual Classes
List Name


Panels with Contextual Classes
List Name

Osnovni seznam vsebin je spodaj


  • Seznam vsebin1
  • Seznam vsebin2
  • Seznam vsebin3
  • Seznam vsebin4

Izhod:

Zaključek

Včasih je kontekst spletne aplikacije videti nerodno in nelagodno za branje. Deluje na mejo in slog z oblazinjenjem. Vsaka vsebina dobi oblikovano oblazinjenje s pomembnim kontekstom. Za smiseln kontekst je uporabljen velik razred zagonske plošče. Zaradi tega je kontekst berljiv, privlačen in učinkovitejši.

Priporočeni članki

To je vodnik za Bootstrap panele. Tukaj razpravljamo o uvedbi in vrstah zagonskih plošč skupaj z različnimi primeri in implementacijo kode. Če želite izvedeti več, si oglejte tudi naslednje članke -

  1. Zakaj bi morali uporabljati Drupal?
  2. Top 28 ukazov za začetno uporabo
  3. Koraki za namestitev zagonske strani
  4. 10 najboljših značilnosti tipografije Bootstrap

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700

Table Name

Brand Name
Brand Price (Rs)

Brand A
500

Brand B
400

Brand C
700