Edita CSS per als temes

Fulls d'estil en cascada (CSS) us permet controlar el format del vostre lloc web. Per defecte, els fitxers bootstrap.min.css i theme.css estan disponibles. Podeu editar els fitxers de CSS existents i carregar fitxers CSS nous. Quan pengeu un fitxer CSS nou, estarà disponible com a fitxer web a l'aplicació Gestió del portal.

Nota

Power Apps portals es basen en Bootstrap 3.3.x amb l'excepció de Portal d'esdeveniments. Els desenvolupadors del portal no han de substituir Bootstrap 3 per altres biblioteques CSS, ja que alguns dels escenaris dels portals Power Apps depenen de Bootstrap 3.3.x. Per obtenir més informació, vegeu les seccions Comprendre el marc de treball de Bootstrap i Personalitzar Bootstrap d'aquest article.

Per obrir un CSS a l'editor de codi:

  1. Editeu el portal per obrir-lo a Power Apps portals Studio.

  2. Seleccioneu Tema icona Tema. de la part esquerra de la pantalla. Es mostren els temes disponibles.

    Tema

  3. Seleccioneu la CSS desitjada per obrir-la a l'editor de codi.

  4. Editeu el codi i deseu els canvis.

Per penjar un fitxer CSS nou:

  1. Editeu el portal per obrir-lo a Power Apps portals Studio.

  2. Seleccioneu Tema icona Tema. de la part esquerra de la pantalla. Es mostren els temes disponibles.

  3. Seleccioneu Carrega CSS personalitzada.

    Pengeu CSS personalitzats.

  4. Navegueu i seleccioneu el fitxer CSS que voleu carregar.

Comprendre el marc de treball Bootstrap

Bootstrap és un framework frontal que inclou components CSS i JavaScript per a elements comuns de la interfície d'aplicació web. Inclou estils per a elements de navegació, formes, botons i un sistema de disseny de quadrícula eficaç, que permet que el disseny del lloc s'ajusti de forma dinàmica als dispositius que tinguin diferents mides de pantalles, com ara, telèfons i tauletes. Si utilitzeu el sistema de disseny de Bootstrap, podreu desenvolupar un únic lloc que mostri una interfície adequada per a tots els dispositius que puguin utilitzar els vostres clients.

Les plantilles incloses als portals de s'implementen mitjançant components estàndards de Bootstrap amb els mínims estils personalitzats addicionals. Per tant, quan implementeu les plantilles, podeu aprofitar les opcions de personalització de Bootstrap. Podeu personalitzar el tema (fonts, colors, etc.) de forma ràpida i de manera que s'apliqui consistentment a través del portal.

Personalitzar Bootstrap

Bootstrap admet la personalització mitjançant un conjunt de variables. Podeu definir qualsevol d'aquestes variables als valors personalitzats i, a continuació, baixar una versió personalitzada de Bootstrap compilada en funció d'aquests valors.

La capacitat de les variables de Bootstrap és que no dicten l'estil d'un únic element. Tots els estils del marc es basen en aquests valors i en venen derivats. Per exemple, tingueu en compte la variable @font-size-base. Això especifica la mida que Bootstrap assigna al text normal del cos. No obstant això, Bootstrap també utilitza aquesta variable per indicar el cos de lletra de les capçaleres i altres elements. La mida d'un element H1 es pot definir com un 300 % la mida de @font-size-base. En configurar aquesta variable, controleu tota l'escala topogràfica del vostre portal de forma coherent. De la mateixa manera, la variable @link-color controla el color dels enllaços. Per al color que assigneu a aquest valor, Bootstrap definirà el color dels enllaços quan es passa el ratolí per sobre un 15 % més fosc que el vostre valor personalitzat.

La manera estàndard de crear una versió personalitzada de Bootstrap és a través del lloc oficial de Bootstrap. No obstant això, a causa de la popularitat de Bootstrap, molts llocs de tercers també s'han creat amb aquesta finalitat. És probable que aquests llocs proporcionin una interfície fàcil d'utilitzar per a la personalització de Bootstrap, o proporcionin versions predissenyades de Bootstrap perquè les pugueu baixar. El lloc oficial del personalitzador de Bootstrap proporciona mes informació sobre la personalització de Bootstrap.

Quan baixeu una versió personalitzada de Bootstrap, aquesta conté l'estructura de directoris següent.

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

O, segons l'aplicació de personalització que utilitzeu, potser que només contingui bootstrap.min.css. De totes maneres, bootstrap.min.css. és el fitxer que conté les personalitzacions. Els altres arxius són el mateix per a totes les versions personalitzades de Bootstrap i, per tant, ja estan inclosos al vostre portal.

Consulteu també