Adaptīva vietne var pielāgot ekrāna izmēru un ierīces izmērus, kādā tā tiek skatīta. Līdztekus vietnes atsaucībai ir nepieciešams arī, lai attēli un teksts būtu saskaņoti un atsaucīgi. Izlīdzinātie attēli ir tie, kas apņem tekstu. Lai gan līdzinātais teksts ir tāds, kas izskatās kā vesela rindkopa.
Šajā rakstā tiks aplūkota metode, kā pielāgot attēlus un tekstu atbilstoši.
Kā atbilstoši saskaņot attēlus un tekstu?
Saturu, tostarp attēlus un tekstu, var pielāgot, izmantojot Bootstrap. Lai nodrošinātu demonstrāciju, esam uzskaitījuši divus piemērus:
- Izlīdziniet tekstu vertikāli centrā un attēlu horizontāli.
- Izlīdziniet tekstu un adaptīvo attēlu pa kreisi.
1. piemērs: Centrā līdzināt tekstu vertikāli un attēlu horizontāli
Vispirms mēģiniet centrēt attēlu horizontāli un tekstu vertikāli. Šim nolūkam izpildiet tālāk sniegtos norādījumus.
1. darbība: izveidojiet HTML struktūru
Veidojot HTML struktūru, vispirms izveidojiet saiti uz ' Bootstrap ” un arī ārējo CSS failu. Pēc tam izveidojiet a 2. darbība: izmantojiet CSS Uz konteinera: Ieslēgts Uz teksta: Var novērot, ka teksts ir centrēts vertikāli, bet attēls ir centrēts horizontāli: 2. piemērs. Izlīdziniet tekstu un atsaucīgo attēlu pa kreisi Šajā piemērā attēls un teksts tiks līdzināti pa kreisi. Šim nolūkam izpildiet tālāk sniegtos pakāpeniskos norādījumus. 1. darbība: izveidojiet HTML struktūru HTML kods ir tāds pats kā iepriekš, izmantots piemērā. 2. darbība: izmantojiet CSS Uz konteinera: Ieslēgts Uz teksta: Izvade apstiprina, ka teksts un attēls ir līdzināti pa kreisi: Lai pielāgotu attēlus un tekstu, vispirms izveidojiet režģi vai elastīgu izkārtojumu CSS, pēc tam iestatiet “ līdzināt-vienums 'īpašuma vērtība uz ' centrs ”. To darot, attēli un teksts tiks atbilstoši izlīdzināti CSS. Šis raksts ir sniedzis lietotājiem pilnīgu ceļvedi, lai atbilstoši pielāgotu attēlus un tekstu. tags un teksts:
< ķermeni >
< div klasē = 'konteiners' >
< img src = 'testa attēls.jpg' viss = 'pārbaudes attēls' >
< div klase = 'teksts' > Šis ir kāds teksts. div >
div >
ķermeni >
:
.konteiners {
displejs: flex ;
teksta līdzināšana: centrs;
attaisnot-saturs: centrs;
izlīdzināt vienumus: centrs;
}
img {
maksimālais platums: 100 % ;
augstums: auto;
}
.teksts {
fonta izmērs: 16 pikseļi;
maksimālais platums: 390 pikseļi;
}
:
.konteiners {
displejs: flex ;
flex-direction: kolonna;
align-itemes: flex-start;
teksta līdzināšana: pa kreisi;
}
img {
maksimālais platums: 100 % ;
augstums: auto;
}
.teksts {
fonta izmērs: 16 pikseļi;
maksimālais platums: 390 pikseļi;
}
Secinājums