Nessun autostima progettisti di pagine web,
sarebbe oggi progettare pagine web senza includere
qualche forma di immagini o media sui loro siti web.
I professori di informatica sono un'eccezione.
A questo punto, probabilmente ti aspetti che lo dica,
ma non è quello che sto per dire.
Ho intenzione di dire che,
«Una foto vale $12 su iStockPhoto.com.
Bootstrap fornisce un ampio supporto per l'inclusione di
immagini e vari tipi di media nei vostri siti web e le vostre pagine web.
Il tag HTML immagine sta ovviamente per essere utilizzato per includere le immagini nelle tue pagine web.
Bootstrap fornisce anche un sacco di classi che è possibile applicare al
tag immagine al fine di migliorare ulteriormente il modo in cui le immagini sono incluse nella vostra pagina web.
Quindi potresti usare una classe di immagini chiamata img-fluid che renderà le tue immagini reattive,
il che significa che la dimensione dell'immagine si adatta automaticamente alle diverse dimensioni dello schermo.
Puoi anche usare un img-thumbnail che metterà un bordo bianco intorno all'immagine.
È anche possibile gestire le forme e le dimensioni delle immagini come si
vede in questa immagine qui in modo da poter avere immagini per le quali si creano angoli arrotondati,
sia tutti i quattro angoli,
o qualsiasi coppia di angoli scelta.
Quindi puoi applicare la classe attorno ad essa per
creare un'immagine con angoli arrotondati o puoi vedere
un trattino arrotondato in alto in basso a sinistra o a destra per inserire
gli angoli arrotondati in uno di questi quattro bordi dell'immagine.
È inoltre possibile applicare un cerchio arrotondato per creare immagini circolari.
Quindi, quando visiti siti web,
vedresti già le immagini utilizzate in molti di questi modi.
Ricorderete che abbiamo visto la classe Card nella lezione precedente e nell'esercizio.
Qui, illustro l'uso della classe Card con un'immagine inclusa.
Quindi, in questo caso, includiamo un'immagine con l'immagine della carta di classe superiore e se
includi dimensioni sufficienti l'immagine che l'immagine verrà inclusa
nella parte superiore e quindi racchiusa all'interno di una carta come questa.
Se l'immagine è troppo piccola
, può essere posizionata in un angolo della scheda.
Quindi usa un'immagine abbastanza grande per essere in grado di definire una carta pulita come questa.
Quindi qui vedrai l'immagine descritta con,
le classi applicate a quella compresa l'immagine della carta superiore
e img-fluid per rendere l'immagine reattiva automaticamente.
Quindi, questo è il modo in cui è possibile utilizzare le immagini con la classe Card
per definire le schede che si utilizzano sulle pagine web.
Un altro modo per includere immagini e contenuti correlati nelle pagine Web è un oggetto multimediale.
Un oggetto multimediale consente di specificare un'immagine che è possibile posizionare
a sinistra o a destra della descrizione.
Inoltre, è possibile includere un corpo multimediale
che contiene la descrizione associata all'immagine.
Quindi, come vedete in questo esempio qui,
il corpo del supporto stesso racchiude qualsiasi contenuto HTML formattato qui.
Quindi qui sto usando un h2 e h4 insieme a
una classe p all'interno del corpo del supporto per definire il contenuto effettivo.
Useremo l'oggetto multimediale nell'esercizio che segue.
Puoi anche eseguire un incorporamento reattivo di contenuti.
Ad esempio, se hai un video che vuoi racchiudere nella tua pagina web,
puoi usare una classe iframe per inquadrare il video
e quindi racchiuderlo all'interno del div con le classi
reattive incorporate dando dimensioni in modo da poter 16by9,
4by3 o video, contenuti da visualizzare.
Quindi l'incorporamento reattivo, puoi usare i
tag HTML embed o iframe o video o oggetto e quindi racchiuderlo all'interno di un div.
Applicando il responsive di incorporamento e anche insieme al responsivo di incorporamento,
specificando le dimensioni che si desidera utilizzare per le dimensioni 4by3 o 16by9.
Quindi questo è il modo in cui puoi anche racchiudere contenuti video nelle tue pagine web.
Ora, che abbiamo visto il supporto per le immagini e i media,
è il momento di andare su un esercizio in cui vedremo come possiamo includere
le immagini nella pagina web o nel sito web su cui abbiamo lavorato.
Apporteremo alcune modifiche alla pagina index.html
includendo alcune immagini e contenuti utilizzando l'oggetto multimediale.