Hur skapar man en parallellsida med full bredd med Bootstrap?
Att skapa en parallaxsida i full bredd med Bootstrap innebär att man använder bakgrundsbilder, positionering och CSS3-transformationer. Så här kan du uppnå detta:
HTML-struktur
1. Skapa en grundläggande HTML-struktur med en "body" och "header"-sektion:
```html
Parallax-sida
bakgrundsbilaga:fixerad;
bakgrundsstorlek:omslag;
bakgrundsupprepning:ingen upprepning;
höjd:100vh;
}
/* Parallaxstilar */
.parallax-container {
position:relativ;
höjd:100vh;
}
.parallax-lager {
position:absolut;
topp:0;
vänster:0;
bredd:100%;
höjd:100%;
}
.parallax-layer--image {
bakgrundsbilaga:fixerad;
bakgrundsstorlek:omslag;
bakgrundsupprepning:ingen upprepning;
}
/* Parallaxeffekter */
@media (maxbredd:992px) {
.parallax-layer--image {
transform:translate3d(0, 0, 0);
}
}
@media (min-bredd:992px) {
.parallax-layer--image {
transform:translate3d(-50%, 0, 0);
}
}
```
Förklaring
- "Kroppen" är inställd på svart som bakgrundsfärg.
- "Rubriken" har en fast bakgrundsbild, täcker hela visningsportens höjd och har ingen upprepning.
- `.parallax-behållaren` har en relativ position, vilket gör att de underordnade elementen kan placeras absolut inuti den.
- `.parallax-skiktet` är absolut placerat och täcker hela behållaren.
- `.parallax-layer--image` har en bakgrundsbild, är fixerad, täcker hela lagret och har ingen upprepning.
- Mediefrågorna tillämpar parallaxeffekter baserat på skärmens bredd. Vid mindre bredder (mobila enheter) finns det ingen parallaxeffekt, medan vid större bredder (större skärmar) rör sig bakgrundsbilderna med halva rullningshastigheten, vilket skapar parallaxeffekten.
Användning
3. Inom "kroppen", lägg till ytterligare sektioner eller innehåll efter önskemål och slå in dem i en ".parallax-behållare". Inkludera bakgrundsbilder för varje avsnitt som `.parallax-lager--bild`.
```html
```
Slutsats
Genom att kombinera fasta bakgrundsbilder, positionering och CSS3-transformationer har du framgångsrikt skapat en parallaxsida i full bredd med Bootstrap. Justera CSS och innehåll efter behov för att anpassa din parallaxupplevelse.
