Il nostro prossimo esercizio esamina le modalità di visualizzazione dei contenuti sulla nostra pagina web.
Essi guardano a come possiamo includere tabelle nella nostra pagina web e come possiamo
modellare quelle tabelle utilizzando le classi di Bootstrap per le tabelle di styling,
incluso il design reattivo delle tabelle.
Vedremo anche un altro componente versatile
che è disponibile in Bootstrap chiamato come una scheda.
Una scheda consente di visualizzare i contenuti in milioni di modi.
Quindi esamineremo due modi diversi di utilizzare una scheda per visualizzare il contenuto.
Più tardi, vedremo l'uso delle carte più e più volte
per progetti futuri di alcune parti del nostro sito web.
Per iniziare, apri la pagina aboutus.html.
Stiamo per inserire una tabella e due carte
nella pagina aboutus.html per visualizzare qualche scheda. Per
prima cosa, scorriamo lentamente verso il basso fino a dopo quella scheda per informazioni sulla leadership,
e proprio lì ho intenzione di introdurre un altro div all'interno del
quale ho intenzione di allegare la tabella qui.
Quindi, introdurrò una nuova riga qui,
con la classe come riga contenuto.
E all'interno di questo div,
introdurremo una colonna che ospiterà la tabella qui.
Quindi, introdurrò una colonna, colonna 12,
colonna sm-9 e chiuderò il div.
E all'interno div, lasciatemi dare un titolo qui
Fatti e Figure e chiudere il h2.
Subito dopo, lasciami introdurre un altro div,
che la colonna delle classi sm e la colonna sm-3 e chiudi quel div lì.
In questo momento lasceremo vuoto il secondo div.
Ho intenzione di compilare la tabella nel primo div qui e
poi daremo una rapida occhiata alla tabella dopo aver aggiunto il codice per la tabella.
Quindi qui ho elencato nel codice per la tabella.
Diamo un'occhiata veloce al tavolo e poi torneremo a discutere di questo codice qui.
Passando alla nostra pagina Informazioni su cui abbiamo già lavorato da prima,
dopo la sezione Corporate Leadership,
si vede una nuova riga qui che introduce la tabella.
Quindi, nota come è in stile la tabella,
quindi abbiamo l'intestazione con un h2 incluso lì,
ma concentriamoci specificamente su questa tabella.
Quindi vedete che questa tabella è stata disegnata
utilizzando alcune classi Bootstrap che vengono utilizzate per migliorare la tabella.
L' intestazione è stata renderizzata con uno sfondo scuro,
quindi le regole sono tutte progettate in modo tale che le righe alternative siano di
colore diverso in modo da poter distinguere chiaramente le righe di questa tabella.
Questo è ciò che nei termini Bootstrap viene indicato come tabella a strisce.
Questo è un esempio di come è possibile definire lo stile di una tabella.
Ora interessante, se guardi la stessa tabella in un piccolo dispositivo,
noterai che la tabella è ancora
visibile tranne che questa tabella ora diventa scorrevole.
Quindi, tutto ciò che può essere visualizzato all'interno del contenuto verrà mostrato e
il resto della tabella può essere fatto scorrere orizzontalmente sul posto.
Quindi questo è il componente reattivo del supporto di Bootstrap per le tabelle in azione.
Ora andiamo a dare un'occhiata al codice stesso.
Ora ovviamente questa tabella è abbastanza semplice,
ha un sacco di righe e alcune colonne.
Quindi ti aspetterai che io usi i tipici
tag th, td e tr lì.
Tornando al codice,
noterai che sto allegando questa tabella all'interno di
div a cui ho applicato la tabella di classe reattiva.
Quindi questo è ciò che rende questa tabella reattiva in modo che su
schermi più piccoli sia possibile scorrere orizzontalmente la tabella.
Ora per la tabella stessa,
nota come ho applicato due classi.
Uno è la classe tabella,
quindi questo sta sovrascrivendo il
rendering predefinito della tabella sui browser fornendo classi proprie di Bootstrap.
E il secondo dice a strisce da tavolo.
Quindi questo è ciò che progetta una tabella con righe alternative in diversi colori qui.
Quindi la testa stessa,
in modo da poter vedere che le intestazioni descritte qui con la classe tead-scura,
quindi questo rende la testa scura.
E poi vedrai il tavolo disegnare stesso descritto qui con i tag th qui.
Quindi questa è la definizione della tabella standard.
Il corpo della tabella stessa è l'uso standard html di tr,
td, e th elementi che hai già familiarità con in html5.
Quindi, questo è ciò con cui è costruita la tabella
e quindi chiudi il corpo della tabella. Quindi questo è tutto.
Quindi tutto ciò che è unico di Bootstrap stesso è l'applicazione di
queste classi specifiche Bootstrap
all'elemento tabella stesso per lo stile ulteriormente,
per adattarsi a una pagina web di progettazione Bootstrap.
Il prossimo componente che aggiungerò nella
pagina aboutus.html è un componente della scheda in Bootstrap.
Il componente della scheda ci permette di visualizzare il contenuto
impostandolo separatamente dal resto di quel contenuto.
Ora qui, scorrendo fino alla prima riga qui,
lì abbiamo la nostra storia nel secondo uso div, si
noti che il primo div sta già occupando col-sm-6,
il secondo div è attualmente vuoto.
Quindi a questo div,
aggiungerò nella classe come col-sm.
Successivamente, andando in questo div introdurrò un altro div alla scheda di classe qui.
Quindi all'interno di quei div,
ho intenzione di costruire la mia scheda per visualizzare alcuni contenuti qui.
Quindi, in questo div, introdurremo un h3 che
la classe come card-header bg-primario.
Quindi vedrai che questo h3 verrà visualizzato come
intestazione di una carta con quello sfondo come primario
e poi testo bianco quale classe Bootstrap definirà il testo di colore bianco.
E poi all'interno di questo h3,
ho intenzione di introdurre il titolo di questa scheda qui che
è 'Fatti a colpo d'occhio. '
In modo da poter mostrare alcuni contenuti all'interno di questo div qui.
Ora, a questa scheda,
dopo ho intenzione di aggiungere un altro div interno
qui con la classe come card-body,
e all'interno di questo card-body sarà
il contenuto effettivo che sono stati visualizzati in questa scheda.
Salviamo le modifiche e poi andiamo a dare un'occhiata rapidamente alla nostra pagina web.
Andando alla nostra pagina web,
possiamo già vedere la carta prendere forma nella nostra pagina web, in
modo da poter vedere che la metà sinistra è occupata dalla Storia
e la metà destra vedrete la carta messa in atto.
Aggiungiamo un po' di contenuto in questa scheda.
Entrando in questo blocco di schede,
ora userò un elenco di descrizioni
e questo elenco di descrizioni in Bootstrap mi permette di
applicare le classi di riga e colonna ad esso e quindi formattare il contenuto all'interno.
Quindi all'interno di questa lista di descrizioni,
aggiungerò
nel dt che la classe e col-6 qui,
quindi significa che questo occuperà sei colonne
all'interno di questa lista di descrizioni che a sua volta è una riga qui.
Così nidificazione come vedete venire in foto qui.
Quindi a questo dt,
aggiungerò così questo titolo di descrizione qui,
e poi sotto che aggiungerò il dd con
la classe col-6 qui e poi posso aggiungere in qualche contesto qui.
E qui Dd.
Salviamo le modifiche e diamo un'occhiata veloce alla nostra scheda.
Andando alla nostra scheda, è ora possibile vedere come
l'elenco descrizione mi permette di visualizzare le informazioni.
All' interno del mio biglietto, è possibile vedere chiaramente il lato sinistro e il lato destro.
Qui stiamo approfittando della lista descrizione e,
aggiungendo le informazioni lì.
Lasciami finire le parti rimanenti qui aggiungendo il codice,
e poi tornare indietro e dare un'occhiata alla versione finale di questa carta.
Qui, puoi vedere che ho completato l'aggiunta nelle
restanti parti della mia lista di descrizione.
Andiamo a dare un'occhiata alla nostra versione finale di quella carta.
Dando un'occhiata alla carta,
e come sta prendendo forma.
Qui, è ora possibile vedere come possiamo fare uso di una scheda per visualizzare
alcuni contenuti nella nostra pagina web e
distinguerlo dal resto del contenuto della pagina Web.
Quindi, una scheda è un componente molto versatile che ci permette di visualizzare contenuti come questo.
Continuiamo con questo esercizio,
aggiungendo un'altra scheda a questa pagina web.
Torniamo ora di nuovo alla nostra pagina aboutus.html.
E proprio sotto la scheda che abbiamo già aggiunto in precedenza,
ho intenzione di aggiungere un altro div con la classe «col-12" qui.
E poi, all'interno di questo div,
ho intenzione di costruire un'altra scheda qui per visualizzare alcune informazioni aggiuntive.
Quindi all'interno di questo div,
costruirò una carta con
la classe «card-body bg-light».
Quindi, vedrai che sto applicando sia la carta che il card-body allo stesso div qui.
Quindi il che significa che questa particolare carta non avrà
alcuna intestazione della carta, ma invece contiene solo il card-body qui.
E poi, anche, il bg-light significa che lo sfondo sarà in colore sbiadito.
Un po 'di un colore grigiastro aggiunto allo sfondo.
Quindi questo cerca anche questa carta a parte il resto del contenuto qui.
Ora, all'interno di questo biglietto,
farò uso di un codice di blocco per mostrare
qualche interessante e divertente pezzo di informazioni lì.
Quindi userò un blockquote.
Questo è anche un tag HTML qui.
E poi a questo, applicherò la classe blockquote di Bootstrap.
Quindi Bootstrap crea questo blockquote a modo suo.
Quindi chiudiamo quella citazione di blocco.
E all'interno di questo blockquote,
includerò una citazione qui.
Quindi inizierò con una p
e applicherò una classe chiamata mb-0.
Il mb-0 è una classe di utilità fornita da Bootstrap.
Ciò che significa è margino-basso zero.
Per questo particolare, qualunque cosa sia inclusa in questo tag p,
avremo un margine inferiore di zero.
E questo mi aiuta a visualizzare correttamente il contenuto qui.
Quindi qui ho intenzione di aggiungere il contenuto effettivo lì,
e poi chiudere questa p. Quindi questa p contiene la citazione effettiva.
Ora, a questa citazione, in
modo da vedere che nel tuo contenuto,
puoi anche includere citazioni nel tuo codice lì.
Quindi a questo, posso anche aggiungere un piè di pagina con la classe.
Quindi fammi spingere il rientro del piè di pagina.
Quindi questo piè di pagina è anche una classe supportata da blockquote.
Quindi, qualunque cosa tu includa nel blockquote,
insieme al footer,
ti permetterà di visualizzare l'autore di questa citazione.
Quindi eccomi qui l'autore,
e poi un altro.
Usando la citazione, posso anche citare la fonte di questa citazione.
Così si può vedere.
Ancora una volta, questa è solo una citazione che sto usando solo per divertimento per mostrarti,
anche allo stesso tempo illustrando,
come funziona il blockquote,
e anche come possiamo creare un altro tipo di scheda in Bootstrap.
Quindi con questo, abbiamo aggiunto nel codice per visualizzare il blockquote qui.
Quindi fammi vedere se questo cambia,
e poi andremo a dare un'occhiata a come questa citazione viene visualizzata nella nostra pagina web.
Andando al browser, nella nostra pagina,
puoi vedere che la nostra storia e i fatti a colpo d'occhio vengono visualizzati fianco a fianco.
Sotto quello, ho questo lungo pezzo di contenuto qui.
Diamo un'occhiata alla stessa pagina in uno schermo extra piccolo.
Quindi, in uno schermo extra piccolo,
si può vedere che la storia e i fatti sono impilati in cima,
e la citazione è proprio qui sotto nella sua carta.
Quindi puoi vedere due carte,
una sotto l'altra qui,
e poi la tabella stessa visualizzata in basso.
Quindi la tabella stessa è una tabella scorrevole qui.
Quindi con questo, completiamo questo esercizio.
Quindi, in questo esercizio,
abbiamo imparato come possiamo usare tabelle e schede per visualizzare i contenuti nella nostra pagina web.
Ora che abbiamo completato questo esercizio,
è un buon momento per fare un commit git.