Bootstrap – yleiskatsaus
Bootstrap on käyttöliittymäkehys, jonka avulla voit suunnitella verkkokäyttöliittymiä valmiilla CSS- ja JavaScript-komponenteilla yleisille elementeille, kuten navigointi, lomakkeet ja painikkeet. Siinä on myös responsiivinen ruudukkoasettelujärjestelmä, joka mukauttaa sivustosi erikokoisille laitteille, kuten puhelimille ja tableteille. Bootstrap-asettelujärjestelmän avulla voi luoda yhden sijainnin, joka näyttää hyvältä missä tahansa asiakkaiden mahdollisesti käyttämissä laitteissa.
Power Pages -mallit käyttävät tavallisia Bootstrap-komponentteja minimaalisilla mukautetuilla tyyleillä. Näiden mallien avulla voit helposti muuttaa teemaa (fontit, värit ja niin edelleen) vastaamaan brändiäsi ja mieltymyksiäsi johdonmukaisesti koko sivustollasi.
Power Pages tukee Bootstrap-versioita 3.3.6 ja 5. Bootstrap-versio 5 tarjoaa parannetun käyttökokemuksen (UX) ominaisuuksia ja uusia komponentteja, kuten haitarivalikko-, offcanvas- ja RTL-tuen.
Uusissa Power Pages -sivustoissa ympäristöön on määritettävä Bootstrap-versio 5. Voit myös siirtää olemassa olevat Bootstrap-version 3 verkkosivustot versioon 5.
Bootstrap-käynnistyksen mukauttaminen
Voit mukauttaa Bootstrapia muuttamalla muuttujien arvoja ja lataamalla sitten Bootstrap-version, joka on koottu näiden arvojen perusteella.
Bootstrap-muuttujien teho on siinä, että ne määrittelevät kaikki kehyksessä olevat tyylit, eivät vain yhtä elementtiä. Esimerkiksi muuttuja @font-size-base määrittää sivustosi tekstin oletuskoon – leipätekstin, otsikot ja kaikki muut tekstielementit. H1-otsikko voidaan määritellä 300 prosentiksi @font-size-base -kohteesta. Kun määrität yhden muuttujan, ohjaat sivuston koko typografista asteikkoa johdonmukaisella tavalla.
Voit luoda mukautetun version Bootstrapista virallisen Bootstrap-sivuston kautta tai käyttää kolmannen osapuolen sivustoa, joka saattaa tarjota helpomman käyttöliittymän tai valmiiksi suunniteltuja teemoja. Virallisessa Bootstrap-mukauttajan sivustossa on lisätietoja Bootstrap-mukauttamisesta.
Kun lataat mukautetun Bootstrap-version, se sisältää seuraavan hakemistorakenteen:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
Käytetystä mukauttajasovelluksesta riippuen hakemistorakenne voi myös sisältää tiedoston bootstrap.min.css. Se on tiedosto, joka sisältää mukautukset. Muut tiedostot ovat samat kaikille mukautetuille Bootstrap-versioille ja siten sisältyvät jo sivustoon.