Editați CSS pentru teme

Foile de stil în cascadă (CSS) vă permit să controlați formatarea site-ului dvs. web. În mod implicit, fișierele bootstrap.min.css și theme.css sunt disponibile. Puteți edita fișierele CSS existente și să încărcați fișiere CSS noi. Când încărcați un fișier nou CSS, acesta va fi disponibil ca fișier web în aplicația Gestionare portal.

Deschideți a CSS în editorul de cod

Pentru a deschide un CSS în editorul de cod, editați portalul pentru a-l deschide în Power Apps portals Studio.

1. Selectați Temă din partea stângă a ecranului. Se afișează temele disponibile.

   

2. Selectați CSS dorit pentru a-l deschide în editorul de cod.

3. Editați codul și salvați modificările.

Încărcați un nou CSS fișier

Pentru a încărca un nou CSS fișier, editați portalul pentru a-l deschide în Power Apps portals Studio.

1. Selectați Temă din partea stângă a ecranului. Se afișează temele disponibile.

2. Selectați Încărcați CSS particularizat.

   

3. Răsfoiți și selectați fișierul CSS de încărcat.

Ștergeți un fișier CSS personalizat

Fișierele CSS sunt stocate ca fișiere web.

1. Pentru a elimina fișierul CSS, accesați aplicația Gestionare portal și selectați Fișiere web.

2. Localizați înregistrarea fișierului CSS. Poate fi necesar să filtrați după valorile Nume și Site pentru a localiza înregistrarea corectă.

3. Odată ce înregistrarea fișierului web este selectată, selectați Ștergeți.

4. În portalul Studio, selectați Sincronizați configurația pentru a șterge modificările de stil de la CSS particularizat.

Înțelegerea cadrului de lucru Bootstrap

Bootstrap este un cadru de lucru front-end care include componente CSS și JavaScript pentru elementele comune ale interfeței aplicațiilor web. Acesta include stiluri pentru elemente de navigare , formulare, butoane și un sistem de aspect grilă receptiv, ce permite aspectelor de site să se adapteze dinamic la dispozitive cu diferite dimensiuni de ecran, precum telefoanele sau tabletele. Utilizând sistemul de aspecte Bootstrap, puteți dezvolta un singur site care prezintă o interfață corespunzătoare pentru toate dispozitivele pe care le-ar putea utiliza clienții dvs.

Șabloanele incluse cu portalurile sunt implementate folosind componentele Bootstrap standard cu stiluri personalizate suplimentare minime. Așadar, când implementați șabloane, puteți profita de opțiunile de personalizare Bootstrap. Puteți personaliza rapid tema (fonturi, culori etc.) și într-un mod care este aplicat unitar în portal.

Personalizare Bootstrap

Bootstrap acceptă personalizarea prin intermediul unui set de variabile. Puteți seta orice variabilă sau pe toate la valori personalizate, apoi puteți descărca o versiune personalizată de Bootstrap, care este elaborată pe baza acestor valori.

Puterea variabilelor Bootstrap este că ele nu dictează stilul unui singur element. Toate stilurile din cadru se bazează pe aceste valori și derivă din ele. De exemplu, luați în considerare variabila @font-size-base. Aceasta specifică dimensiunea pe care Bootstrap o atribuie textului de conținut normal. Cu toate acestea, Bootstrap utilizează această variabilă și pentru a indica dimensiunea fontului pentru titluri și alte elemente. Dimensiunea unui element H1 poate fi definită ca 300% din dimensiunea @font-size-base. Setând această variabilă, controlați întreaga scală tipografică a portalului dvs. într-un mod consecvent. În mod similar, variabila @link-color controlează culoarea hyperlinkurilor. Pentru culoarea pe care o asociați acestei valori, Bootstrap va defini culoarea de trecere cu mouse-ul pe deasupra pentru linkuri ca fiind cu 15 procente mai întunecată decât valoarea personalizată.

Modul standard de a crea o versiune personalizată de Bootstrap este prin intermediul site-ului oficial Bootstrap. Cu toate acestea, datorită popularității Bootstrap, mai multe site-uri terțe au fost create în acest scop. Aceste site-uri pot oferi o interfață mai ușor de utilizat pentru personalizarea Bootstrap sau versiuni pre-proiectate de Bootstrap, pentru descărcare. Site-ul oficial Bootstrap al persoanei care a particularizat are mai multe informații despre personalizarea Bootstrap.

Atunci când descărcați o versiune personalizată de Bootstrap, aceasta conține următoarea structură de director.

css/
    |-- bootstrap.min.css 
img/
    |-- glyphicons-halflings-white.png 
    |-- glyphicons-halflings.png 
js/ 
    |-- bootstrap.min.js

Sau, în funcție de aplicația de particularizare utilizată, poate conține numai bootstrap.min.css. Oricum, bootstrap.min.css este fișierul care conține particularizările dvs. Celelalte fișiere sunt aceleași pentru toate versiunile personalizate de Bootstrap, așadar sunt deja incluse în portalul dvs.

Consultați și

• CSS avansat în portaluri Power Apps
• Dezvoltare avansată din partea clientului