“Abbiamo conosciuto il framework, esaminato i suoi vantaggi, esaminato brevemente la sua cosiddetta griglia, ora è il momento di capire in pratica come utilizzare Bootstrap.
Puoi scaricare Bootstrap dal sito ufficiale getbootstrap.com. Nella pagina principale, fare clic sul pulsante “ Scarica Bootstrap».
Dopo aver fatto clic, veniamo indirizzati a una pagina che offre diversi tipi di download. In questo articolo considereremo il consueto download della versione completa del framework.
Dopo aver scaricato e decompresso l'archivio, otteniamo tre cartelle:
- CSS- cartella con stili
- JS- cartella con script js
- FONT- cartella con i caratteri delle icone
Questo è l'intero quadro. Per lavorare ulteriormente con Bootstrap, creerò una cartella con lo stesso nome bootstrap, nella cartella creerò un file vuoto index.html e riempirò la cartella e il file insieme all'analisi del framework in questo articolo, e in alla fine del post darò un link in modo che tu possa vedere il risultato. Se mi segui capirai che lavorare con il framework è davvero semplice.
Dal framework scaricato avremo bisogno dell'intera cartella dei caratteri, un file di stile dalla cartella css chiamato bootstrap.css o bootstrap.min.css e allo stesso modo uno script dalla cartella js chiamato bootstrap.js o bootstrap.min.js .
La differenza tra i file con ".min." da quelli ordinari in quei file con ".min." ottimizzato, ovvero il codice è scritto su una riga senza interruzioni di riga e spazi, quindi pesano meno del solito e il contenuto dei file è assolutamente lo stesso.
Ora creerò una cartella css nella mia cartella bootstrap, inserirò il file bootstrap.min.css e creerò una cartella js in cui inserirò bootstrap.min.js. Inoltre, nella cartella css, creerò un file style.css vuoto per aggiungere i miei stili.
I file framework necessari sono stati spostati e ora lavoreremo solo con il file index.html. Per non scrivere il codice da soli, rivolgiamoci alla documentazione; nella pagina di download del sito ufficiale qui sotto c'è uno scheletro HTML già pronto del documento, copiatelo e incollatelo nel nostro file indice.
Il nostro file di stile, lo script js e la libreria jQuery sono già inclusi nello scheletro, ma se non usi " bootstrap» template, ma su alcuni di tuoi, devi collegare il file di stili bootstrap.min.css tra i tag e dopo di esso lo style.css creato.
Quindi, prima del tag di chiusura, includiamo innanzitutto la libreria jQuery.
E dopo la libreria colleghiamo lo script js.
In generale, la struttura HTML del documento si presenta così.
Bootstrap
Il processo preparatorio è completo, Bootstrap è connesso, possiamo andare avanti e iniziare a riempire la nostra pagina WEB con i componenti del framework.
Come utilizzare la documentazioneLa documentazione del framework è molto buona, il che lo rende facile da usare. Il menu principale del sito ufficiale ha diverse sezioni: “ Iniziare», « CSS», « Componenti», « JavaScript" E " personalizzare", nella pagina di ogni sezione nella colonna di destra sono presenti i nomi dei diversi componenti; cliccando su di essi si visualizza la loro descrizione e i casi d'uso sotto forma di codice già pronto.
Se hai difficoltà con la lingua inglese, su Internet ci sono diverse risorse con documentazione tradotta, ecco l'indirizzo di uno di questi siti www.oneskyapp.com/ru/docs/bootstrap. Puoi anche utilizzare una sorta di traduttore del browser, la traduzione, ovviamente, sarà storta, ma l'essenza di ciò che è scritto sarà chiara. In generale, devi solo leggere la documentazione, prendere esempi di codice ed esercitarti.
Lavorare con la griglia BootstrapCome ho detto nell'articolo precedente, la griglia funziona come una tabella, comprese le righe .riga e altoparlanti .col, possono essere presenti al massimo dodici colonne. I prefissi (lg, md, sm, xs) vengono aggiunti alla classe .col, che indicano la larghezza di una determinata colonna a una specifica risoluzione dello schermo.
Righe e colonne vengono racchiuse in un blocco con una classe .contenitore o class.container-fluid . La differenza tra loro è che la classe .container ha una larghezza massima di 1170 pixel, mentre la classe .container-fluid ha una larghezza illimitata, cioè l'intera larghezza dello schermo, anche se la risoluzione dello schermo è molto grande. Per informazioni complete sulla griglia Bootstrap, consultare la documentazione nella sezione " CSS».
Utilizzando la griglia del framework, creeremo il layout classico della nostra pagina (intestazione, contenuto, colonna laterale e piè di pagina), per questo creeremo tre righe e quattro colonne, questo è il codice che otteniamo.
CONTENUTO DELL'INTESTAZIONE PIEDE DELLA BARRA LATERALE
Per separare i blocchi, ho scritto due classi aggiuntive: .block, .block2 e ho aggiunto loro un paio di regole nel file style.css creato.
Blocco( sfondo: #eee; bordo: 1px solido #000; ) .blocco2( sfondo: #ccc; bordo: 1px solido #000; )
Aggiungiamo un carattere icona alle nostre intestazioni. Nel capitolo " Componenti» seleziona le icone che ti piacciono, copia il testo sotto l'immagine, questo testo è una classe. Crea un tag all'interno del tag di intestazione e incolla la classe copiata.
INTESTAZIONE
Ora non ha fatto male aggiungere una sorta di menu. Per fare ciò, nella sezione " Componenti" vai a " Barra di navigazione", seleziona il menù che preferisci, copia il codice e incollalo dopo il tag di apertura.
Non resta che compilare" contenuto t" e " barra laterale" Facciamo tutto secondo lo stesso schema: selezioniamo un componente nella documentazione, leggiamo la descrizione, copiaamo e incollamo nel posto giusto. Aggiungerò un modulo e un pulsante, cliccando sul quale si aprirà una finestra modale con una tabella.
Proprio così, in soli 5 minuti, abbiamo abbozzato il layout di pagina più semplice, adattivo per tutti i dispositivi, e praticamente non abbiamo scritto alcun codice da soli. Segui il link e guarda il risultato.
Qui finirò l'articolo. Abbiamo esaminato solo una piccola parte delle funzionalità del framework, ma penso che tu abbia capito come lavorare con Bootstrap. Il passo successivo è modificare gli stili del framework in base alle proprie esigenze e scaricare solo i componenti necessari. Tutto questo analizzeremo nell’articolo”
Il vantaggio dell'utilizzo dei framework CSS è che il progettista del layout non ha bisogno di pensare a molte sfumature del layout che i creatori dei framework hanno già pensato per lui. Tali sfumature includono la compatibilità tra browser, il supporto per diverse risoluzioni dello schermo e molto altro. Il progettista del layout indica solo cosa, come e quando mostrare, il resto lo fa il framework stesso. Questo approccio può velocizzare notevolmente il layout del sito web. I vantaggi di Bootstrap includono la sua popolarità. Ciò significa che sarà più semplice per un altro progettista del codice mantenere il tuo codice.
Lo svantaggio dell'utilizzo dei framework è che la pagina dovrà portare con sé gli stili extra dell'intero framework, anche se ne utilizza solo una piccola parte. Il framework è uno strumento eccellente per la prototipazione e la creazione di pagine per le quali il design è secondario, come le pagine di amministrazione. Se hai un progetto molto specifico, disporlo utilizzando un framework potrebbe essere più difficile rispetto all'utilizzo di strumenti nativi. Tuttavia, anche questo è possibile.
Informazioni sull'utilizzo di Bootstrap Attualmente esistono diversi modi per lavorare con gli stili Bootstrap senza utilizzare LESS Per i principianti, Bootstrap stesso consiglia il seguente approccio: è necessario scaricare Bootstrap compilato dal sito e inserirlo nel progetto senza modificare nulla. Quindi devi creare il tuo file CSS vuoto e includerlo dopo bootstrap.css.
Successivamente, per modificare gli stili Bootstrap devi modificarli nel tuo Styles.css in questo modo:
A (colore: #beceda; )
L'ovvio svantaggio di questo approccio è che dovrai cercare manualmente gli stili necessari che desideri interrompere, e questo non sarà sempre banale, perché Alcune opzioni di Bootstrap si applicano a molti selettori in forma modificata, ad esempio tramite formule. Lo strumento Personalizza può essere di aiuto in questo caso; aiuterà a compilare correttamente le modifiche, ma solo una volta. Se in futuro vorrai modificare qualche parametro, dovrai reinserire i valori modificati per tutti i campi in modo da compilare i tuoi stili.
Esistono numerosi modi per compilare file LESS e Bootstrap lascia questo a discrezione dello sviluppatore. Lo stesso Bootstrap utilizza Grunt per la compilazione, potresti preferire un plugin per i prodotti JetBrains e noi, poiché l'articolo è rivolto ai principianti, cercheremo soluzioni più semplici. Tali soluzioni sono WinLess per Windows, SimpLESS per Mac o Koala per Linux. Tutti questi programmi fanno più o meno la stessa cosa: ricevono una cartella con MENO file come input e ascoltano le modifiche al loro interno. Non appena apporti modifiche a qualsiasi file, questo viene immediatamente compilato nel file CSS specificato. In questo modo non è necessario eseguire la compilazione manuale dopo ogni modifica. Modifichi il file LESS, lo salvi e vedi subito le modifiche sul sito in forma già compilata e compressa.
Creazione di un progetto Il primo passo è creare una semplice struttura di file per il nostro progetto.
Ispezione preliminare Dopo aver creato la struttura del file, apri il file psd in Photoshop. È importante esaminare attentamente il modello e valutarlo. Dobbiamo capire le seguenti cose: - Come verranno tagliate le immagini?
- Quali componenti verranno utilizzati?
- Quali saranno gli stili principali?
- Quale layout di pagina otterremo?
Salva l'immagine della mappa:
Salviamo i loghi come segue:
Immagini/logo.svg
immagini/footer-logo.png
Le immagini di sfondo ripetute devono essere ritagliate in un piccolo pezzo sufficiente a formare un'immagine completa ripetendole verticalmente e orizzontalmente.
/images/bg.png
/images/h1-bg.png
È conveniente salvare le icone dei social network con le stesse dimensioni in un unico file e utilizzarle come sprite per un caricamento più rapido. Maggiori dettagli sull'incollaggio delle immagini sono descritti nella prima parte. Il risultato saranno due file:
/images/social.png
/images/social-small.png
Se dai un'occhiata al nostro modello, puoi vedere che avremo bisogno dei seguenti componenti:
Prima di tutto, devi aggiungere variabili che non sono nelle impostazioni di Bootstrap in modo da poterle utilizzare in futuro. Per noi questo è solo un font di design specifico.
@brand-font: "Oswald",sans-serif;
Se desideri utilizzare un modello per siti russi, puoi provare a sostituire il carattere Oswald con il Cuprum più vicino, che supporta il cirillico.
Ora sostituiamo le impostazioni di Bootstrap con le nostre:
Ora che abbiamo finito con le variabili, iniziamo a definire lo stile del nostro design nel file Styles.less. Innanzitutto, colleghiamo Bootstrap stesso e le nostre variabili:
@import "bootstrap/bootstrap.less"; @import "variabili.less";
Non tutti gli stili predefiniti di Bootstrap possono essere modificati utilizzando le variabili, quindi facciamolo manualmente:
P ( margine: 20px 0; ) .form-control ( box-shadow: none; ) .btn ( font-family: @brand-font; )
Qui abbiamo rimosso l'ombra dagli elementi del modulo e dato al testo nei pulsanti un carattere di pagina specifico.
Successivamente descriviamo lo sfondo della pagina e la barra superiore:
Corpo ( bordo superiore: 5px solido #7e7e7e; immagine di sfondo: url(../images/bg.png); )
Più avanti nel testo non verrà indicato in quale file sono scritti gli stili. Ricorda solo che salviamo tutte le variabili nel file variabili.less e gli stili CSS verranno archiviati in stili.less.
Piazza Bianca
Questo blocco crea una struttura di documento HTML5. Nel titolo indichiamo il nome della nostra pagina – Whitesquare. Con il meta tag viewport indichiamo che la larghezza della pagina sui dispositivi mobili sarà uguale alla larghezza dello schermo e la scala iniziale sarà del 100%. Quindi viene incluso il file degli stili. E per le versioni di Internet Explorer inferiori alla nona, includiamo degli script che ci permettono di visualizzare correttamente il nostro layout.
Aggiungiamo il seguente codice al corpo:
Qui incontriamo il primo componente Bootstrap: le colonne. All'elemento genitore delle colonne viene assegnata la classe "row" e le classi delle colonne iniziano con il prefisso "col-", quindi la dimensione dello schermo (xs, sm, md, lg) e terminano con la larghezza relativa della colonna .
A una colonna possono essere assegnate contemporaneamente diverse classi con valori per le schermate, ad esempio class="col-xs-12 col-md-8". Queste classi impostano semplicemente la larghezza della colonna come percentuale per una dimensione dello schermo specifica. Se alla colonna non viene assegnata una classe di schermo specifica, verrà applicata la classe per lo schermo specifico minimo e, se non viene specificata, non verrà applicata alcuna larghezza e il blocco occuperà la larghezza massima possibile.
Le nostre classi “col-md-7” e “col-md-17” indicano che i blocchi sono colonne con una larghezza di 7 e 17 rispetto al contenitore principale. Per impostazione predefinita, la somma delle larghezze delle colonne in Bootstrap è 12, ma abbiamo raddoppiato questo numero per ottenere la flessibilità di cui avevamo bisogno.
Corpo (….wrapper (imbottitura: 0 0 50px 0;) intestazione (imbottitura: 20px 0;))
Abbiamo posizionato questa struttura all'interno del corpo. La sintassi LESS consente di annidare le regole l'una nell'altra, che vengono poi compilate nei seguenti costrutti:
Corpo .wrapper (…) intestazione del corpo (…)
Questo approccio ti consente di vedere la struttura HTML direttamente all'interno del CSS e dà un certo "ambito" alle regole.
Inserisci il logo nel tag di intestazione:
Non sono richiesti stili aggiuntivi.
RicercaPer creare una ricerca, avremo bisogno dei seguenti componenti Bootstrap: modulo in linea, controlli raggruppati e pulsante.
Nel tag header creiamo un modulo inline, allineato a destra. I campi di tale modulo devono avere una classe “form-control” e un'etichetta.
Inseriamo il componente “controlli raggruppati” nel modulo. I controlli di raggruppamento consentono di rimuovere lo spazio tra l'immissione di testo e il pulsante e, per così dire, unirli in un unico elemento.
È un div con la classe e i campi "input-group" e il pulsante di tale componente è posizionato in un blocco con la classe "input-group-btn".
Poiché non abbiamo bisogno di mostrare l'etichetta per il campo di ricerca, la nasconderemo con la classe "sr-only". Ciò è necessario per i lettori di schermo dedicati.
La classe “btn-primary” viene aggiunta al pulsante, il che significa che questo è il pulsante principale di questo modulo.
…Cerca VAI
Non ci resta che impostare la larghezza del modulo di ricerca negli stili.
Corpo (….wrapper (…intestazione (….form-search (larghezza: 200px;)))))
MenùPer visualizzare il menu, prendi il componente “pannello di navigazione” e inserisci al suo interno il componente “navigazione”, che è un elenco con collegamenti. Per la navigazione viene aggiunta la classe "navbar-nav", che applica stili di navigazione speciali all'interno della barra di navigazione.
Per adattare questo menu al nostro design, imposteremo i seguenti valori per le variabili:
/*altezza della barra di navigazione*/ @altezza della barra di navigazione: 37px; /*imposta più riempimento orizzontale*/ @nav-link-padding: 10px 30px; /*sfondo per le voci del menu*/ @navbar-default-bg: @panel-bg; /*colore del testo nelle voci del menu*/ @navbar-default-link-color: #b2b2b2; /*e quando si passa il mouse - lo stesso*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*lo sfondo della voce di menu attiva è il nostro specifico colore blu*/ @navbar-default-link-active-bg: @brand-primary; /*colore del testo della voce di menu attiva*/ @navbar-default-link-active-color: #fff;
Oltre ai parametri personalizzabili, ne descriveremo altri negli stili: questo è testo in maiuscolo e il nostro carattere specifico:
Corpo (….wrapper (….navbar a (trasformazione testo: maiuscolo; font: 14px @brand-font; )))
Titolo della paginaIl titolo della pagina viene inserito in un div con la classe "heading".
Chi siamo
E ha i seguenti stili:
Corpo ( … .wrapper ( … .heading ( altezza: 40px; sfondo: URL trasparente(../images/h1-bg.png); margine: 30px 0; riempimento sinistro: 20px; h1 ( display: inline-block; colore: #7e7e7e; carattere: normale 40px/40px "Oswald", sans-serif: url(../images/bg.png);
Qui disegniamo una striscia grigia come sfondo sul div e inseriamo al suo interno un h1 in linea con il carattere desiderato e il colore di sfondo della pagina per creare l'impressione di uno sfondo trasparente per h1.
Quando creiamo un sottomenu, non utilizzeremo il componente “navigazione”, poiché non è molto adatto a noi in termini di stile, è molto più adatto a noi il componente “elenco raggruppato”; Ogni elemento di tale componente ha una classe “list-group-item”.
Il sottomenu dovrebbe essere inserito nel tag a lato. Creiamo un elenco di collegamenti allo stesso modo del menu principale.
Nelle impostazioni del componente indichiamo che tutti gli elenchi raggruppati devono essere mostrati con lo sfondo e la cornice del componente “pannello”:
@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
E applica i seguenti stili al sottomenu:
Corpo ( … .wrapper ( … .submenu ( margin-bottom: 30px; li ( display: elemento-elenco; font: 300 14px @brand-font; posizione-stile-elenco: interno; tipo-stile-elenco: quadrato; riempimento : 10px; trasformazione del testo: maiuscolo; &.active ( colore: @brand-primary; ) a ( colore: @text-color; decorazione del testo: none; &:hover ( colore: @text-color; ) ) ) )
Innanzitutto restituiamo gli stili standard agli elementi dell'elenco, poiché Bootstrap li ha sostituiti con i propri. Aggiungi un'imbottitura nella parte inferiore. I sottomenu utilizzano caratteri più sottili e indicatori quadrati. E per i collegamenti impostiamo i colori, le maiuscole e rimuoviamo la sottolineatura. La e commerciale nel codice "&.active" verrà sostituita dal selettore principale in fase di compilazione utilizzando la sintassi LESS: ".submenu li.active".
Per visualizzarlo utilizzeremo il componente “panel”, ovvero la sua variante “panel-primary” per colorare il titolo. Questo componente contiene un blocco di intestazione (pannello-intestazione) e un blocco di contenuto del pannello (pannello-corpo). Aggiungiamo la classe "img-responsive" all'immagine della mappa, che consentirà all'immagine di ridursi quando la larghezza dello schermo è piccola.
…I nostri uffici 
Nelle variabili Bootstrap abbiamo già impostato il colore per lo sfondo del pannello (panel-bg), e ora indicheremo che il pannello “primario” avrà il bordo grigio del pannello di default, anziché quello blu di default:
@panel-primary-border: @panel-inner-border;
Ora negli stili del sito è necessario modificare le impostazioni del pannello standard, che non vengono modificate tramite variabili:
Pannello ( box-shadow: none; .panel-heading ( font: 14px @brand-font; text-transform: maiuscolo; imbottitura: 10px; ) .panel-body ( imbottitura: 10px; ) )
Qui abbiamo rimosso l'ombra dai pannelli, aggiunto i nostri rientri e impostato il nostro carattere di intestazione.
Questo elemento della pagina è molto simile al componente Jumbotron. Aggiungiamolo alla colonna del contenuto:
“Quisque in enim velit, at dignissim est.” nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”
John Doe, Lorem IpsumUtilizzando le variabili per il componente jumbotron, imposteremo il colore del testo su bianco e lo sfondo blu con il marchio:
@jumbotron-bg: @brand-primary; @jumbotron-colore: #fff;
E descriviamo i nostri stili:
Corpo ( … .wrapper ( … .jumbotron ( border-radius: 0; imbottitura: 0; margine: 0; blockquote ( border-left: none; p ( font: 300 italic 33px @brand-font; text-transform: maiuscolo; margin-bottom: 0; ) piccolo ( allineamento testo: destra; colore: #1D8EA6; carattere: 300 20px @brand-font; &:before ( contenuto: ""; ) ) ) )
In essi, rimuoviamo l'arrotondamento degli angoli, il riempimento dei componenti e le decorazioni delle virgolette impostate da Bootstrap per impostazione predefinita. Aggiungeremo anche stili per i nostri caratteri.
Lorem ipsum dolor sit amet…
Donec vel nisl nibh…
Donec vel nisl nibh…
Il passaggio successivo è aggiungere due immagini che si trovano alla fine del testo del contenuto. Questo viene fatto utilizzando due colonne:
La classe "miniatura" trasforma le immagini in un componente "miniatura". Farà tutto il lavoro di stilizzazione delle immagini per noi. L'unica cosa che ci resta è impostare il riempimento e il colore del bordo nelle variabili per questo componente:
@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;
Blocca "Il nostro team"
Quando disponiamo questo blocco, aggiungiamo prima un titolo:
La nostra squadra
con stile:
Corpo ( … .wrapper ( … h2 ( sfondo: nessuno ripetizione scorrimento 0 0 #29C5E6; colore: #fff; carattere: 300 30px @brand-font; riempimento: 0 10px; trasformazione testo: maiuscolo; ) ) )
E poi aggiungeremo un blocco con la classe “team”, che consiste di due righe contenenti le carte dei dipendenti. Ogni carta è una colonna. La carta ha una larghezza pari a quattro colonne della nostra griglia. Tutte le carte tranne la prima della riga hanno un rientro sinistro, creato dalla classe "col-md-offset-1". Il contenuto della scheda è costituito da un'immagine e una descrizione (.caption)
John Do 
Saundra Pittsley
guida del gruppo
…
Ericka Nobriga direttore artistico
Cody Rousselle progettista senior dell'interfaccia utente
…Dopo aver creato il markup, assegniamo a questi elementi i seguenti stili:
Corpo ( … .wrapper ( … .team ( .row ( margine-top: 20px; .col ( spazio bianco: nowrap; .thumbnail ( margine-bottom: 5px; ) ) .col-md-offset-1 ( margine- sinistra: 3,7%; ) .caption ( h3 ( carattere: 300 16px @brand-font; margine: 0; ) p ( carattere: 300 14px @brand-font; colore: @brand-primary; margine: 0; ) ) ) ) )
Oltre ai rientri e agli stili di carattere impostati qui, abbiamo modificato la classe "col-md-offset-1". Ha dovuto impostare il rientro al 3,7% perché... il rientro standard era troppo grande.
Innanzitutto, creiamo un contenitore footer con questi blocchi:
E applica il disegno ad esso:
Piè di pagina ( sfondo: #7e7e7e; colore: #dbdbdb; dimensione carattere: 11px; .container ( altezza: 110px; imbottitura: 10px 0; ) )
Il tag footer definisce un'area grigia sull'intera larghezza dello schermo e il contenitore al suo interno visualizza un'area centrata su schermi più grandi e specifica l'altezza e il riempimento del piè di pagina. Usiamo le colonne per allineare i blocchi all'interno del piè di pagina.
Feed di Twitter 23 ottobre
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Enea ago
Stili:
Corpo ( ... footer ( ... .container ( ... h3 ( border-bottom: 1px solido #919191; colore: #ffffff; dimensione carattere: 14px; altezza linea: 21px; famiglia di caratteri: @brand -font; margine: 0 0 10px; trasformazione testo: maiuscolo; ) p ( margine: 5px 0; ) .twitter ( p ( riempimento destro: 15px; ) tempo a ( colore: #b4aeae; decorazione testo: sottolineatura; ) ) )
Per tutte le intestazioni del piè di pagina, impostiamo caratteri e rientri e creiamo anche una sottolineatura nel riquadro inferiore. Per i paragrafi, indicare il rientro. Per il collegamento che visualizza la data, imposta il colore e la sottolineatura.
Mappa del sito Casa
Di
Servizi
Partner
Supporto
Contatto
Impostiamo i collegamenti in base al colore, al carattere e allo spazio tra di loro.
Corpo ( ... piè di pagina ( ... .container ( ... a ( colore: #dbdbdb; ) .sitemap a ( display: blocco; dimensione carattere: 12px; margine inferiore: 5px; ) ) ) )
Collegamenti sociali
Inseriamo un insieme di collegamenti in un blocco con la classe “social”.
Social networks
E stiliamoli:
Corpo ( … piè di pagina ( … .container ( … .social ( .social-icon ( larghezza: 30px; altezza: 30px; sfondo: url(../images/social.png) no-repeat; display: blocco in linea; margine -destra: 10px; .social-icon-small (larghezza: 16px; altezza: 16px; sfondo: url(../images/social-small.png) no-repeat; display: blocco in linea; margine: 5px 6px 0 0; ) .twitter (posizione di sfondo: 0 0; ) .facebook (posizione di sfondo: -30px 0; ) .google-plus (posizione di sfondo: -60px 0; ) .vimeo (posizione di sfondo: 0 0; ) .youtube (posizione di sfondo: -16px 0; ) .flickr (posizione di sfondo: -32px 0; ) .instagram (posizione di sfondo: -48px 0; ) .rss (posizione di sfondo: -64px 0; ) ) ) ) )
Qui abbiamo utilizzato la tecnica degli sprite, ovvero quando un file immagine viene utilizzato per immagini diverse. Tutti i collegamenti sono divisi in icone grandi (.social-icon) e piccole (.social-icon-small). Impostiamo queste classi in modo che vengano visualizzate come un blocco in linea con dimensioni fisse e lo stesso sfondo. E poi usando i CSS abbiamo spostato questo sfondo in modo che l'immagine corrispondente fosse visualizzata su ciascun collegamento.
![](https://how-helper.ru/wp-content/uploads/2024/" alt=)
Copyright 2012 Whitesquare. Una creazione di pcklab
Gli stili vengono eseguiti in modo simile ai blocchi precedenti, con l'unica differenza che il blocco è inchiodato al bordo destro e anche l'allineamento al suo interno è a destra:
Corpo ( … .footer ( … .container ( … .footer-logo ( float: right; margin-top: 20px; font-size: 10px; text-align: right; a ( text-decoration: underline; ) ) ) ) )
Questo completa il layout. Il progetto finito può essere scaricato
Ciao, cari lettori del sito blog. Questo è il primo articolo della nuova sezione “Bootstrap”. ? Si tratta di un framework popolare che consente di creare in modo rapido ed efficiente siti Web statici e applicazioni Web. Essenzialmente, si tratta di un set gratuito di strumenti che ti consente di utilizzare Html, CSS e JavaScript a grandi linee.
In questo caso, puoi lavorare con il normale Html statico utilizzando le funzionalità di Bootstrip, oppure puoi provare, ad esempio, a usarlo per creare un modello unico per il tuo sito web in esecuzione su un CMS (poco dopo parleremo della creazione di modelli per Joomla 3 basato su Bootstrap). Allo stesso tempo, non è necessaria alcuna conoscenza particolare di Html e CSS.
Funzionalità di Bootstrap 3 e cos'è il responsive design?Ora ti viene offerto di scaricare Bootstrap 3, che presenta una serie di differenze rispetto alle versioni precedenti:
In Bootstrap 3 esiste un solo sistema di griglia: reattivo (in precedenza ce n'erano due: reattivo e adattivo. Ma la sua funzionalità è stata notevolmente ampliata grazie a un numero maggiore di griglie di diverse dimensioni.
Il fatto è che i tempi in cui gli utenti accedevano ai siti web esclusivamente da computer desktop e portatili sono caduti nel dimenticatoio. Ora, a seconda dell'argomento, il traffico da dispositivi mobili può variare da poche per cento al decine di per cento del totale. Non è più possibile ignorare la comodità di questi visitatori.
Al giorno d’oggi non è sufficiente avere solo un sito web che apparirà e funzionerà perfettamente solo su schermi di grandi dimensioni. È necessario che non perda le sue qualità sugli schermi di vari tablet e smartphone. Creare un sito web separato per dispositivi mobili per questi scopi non sarebbe l'idea migliore (difficoltà nella sincronizzazione delle informazioni, difficoltà nel riconoscimento, ecc.).
Un passo nella giusta direzione è stato il concetto di responsive design, quando il sito stesso può adattarsi (rispondere) adeguatamente alle dimensioni dello schermo dell’utente. Questo viene fatto caricando diversi stili CSS quando si visualizza il sito su schermi di dispositivi diversi. Ad esempio, nel caso di un monitor verranno caricati stili che implementano tre colonne, nel caso di un tablet, con due colonne, e quando l'utente accede da smartphone gli verrà presentato lo stesso sito nella forma di un layout a colonna singola.
(utilizzando Bootstrap o i suoi concorrenti)? Dipende. Tutto dipende dal tipo di problema che risolverai. In linea di principio, il problema della progettazione della parte client del sito può essere risolto in diversi modi:
Ebbene, la terza opzione, che è un compromesso tra quelle sopra descritte, sarebbe un framework responsivo (in particolare Bootstrap). Il fatto è che quando lo usi, parte del lavoro sarà già fatto per te. Non dovrai pensare ad alcuni aspetti del design individuale. Ci sarà già una griglia abbastanza flessibile per il layout della pagina (viene utilizzato MENO CSS, un linguaggio di stile dinamico).
Puoi personalizzare l'aspetto di Bootstrap secondo i tuoi gusti. Non è vero quando si dice che i siti realizzati con questo framework avranno lo stesso aspetto. Dipende tutto da te: ci sono molte possibilità per aggiungere individualità, ma molti semplicemente non se ne preoccupano.
Quando si utilizza il responsive design, il codice di stile sarà tuttavia molto più grande e complesso che senza di esso, perché è necessario prevedere molte situazioni diverse con stili diversi. Oltre a questo, tu, ma poi puoi fare rapidamente ciò di cui hai bisogno (incluso mettere questo processo in streaming). Come si diceva nel famoso cartone animato: è meglio perdere un'ora e poi volare in cinque minuti (gambe, zampe, coda). In questo caso, il progetto sarà di alta qualità.
Questo framework ti consente semplicemente di aggiungere classi (leggi informazioni) agli elementi del codice HTML e applicare loro un design davvero impressionante. Ad esempio, ecco come apparirà la tua classe "table table-hover":
Non è necessario specificare gli stili per questa classe, poiché sono già scritti nei file di stili di Bootstrap stesso. Molto comodo e veloce. E così, ad esempio, puoi creare rapidamente pulsanti da pulsanti normali o utilizzando i tag dei pulsanti, aggiungendo loro le classi necessarie:
Puoi anche utilizzare le classi per creare molto facilmente, sulla base di tag di elenco Html, vari menu (elementi di navigazione), elenchi a discesa, impaginazione (numerazione delle pagine), popup, nonché suggerimenti e molto altro che puoi fare su questa pagina del sito ufficiale:
Bene, e, ovviamente, il layout delle pagine del sito Web con un numero diverso di colonne utilizzando questo framework è letteralmente semplice, ancora una volta, semplicemente aggiungendo contenitori delle classi necessarie.
Scarica Bootstrap e studia la sua struttura dei fileQuindi, puoi scaricare il framework Bootstrap 3 sul sito ufficiale - GetBootstrap.com (c'è anche un mirror russo non ufficiale mybootstrap.ru, dove puoi trovare un'introduzione dettagliata al lavoro con questo framework).
Prenoterò immediatamente che nella scheda "Personalizza" (nella versione russa è "Cambia e scarica") puoi selezionare quali componenti e plugin jQuery ti servono, nonché modificare le variabili responsabili di colori, caratteri, forme , eccetera. cose. Quindi puoi salvare tutto questo e scaricare Bootstrap utilizzando il pulsante situato in basso.
Tuttavia, l’opzione migliore, secondo me, sarebbe capire come funziona questo framework e modificare alcuni parametri man mano che si procede. Inoltre, stiamo iniziando il nostro studio da zero, il che significa che avremo bisogno di tutto ciò che ha Bootstrip. Andiamo quindi semplicemente alla pagina di download del pacchetto standard (la scheda “Per iniziare”) e facciamo clic sul pulsante:
Dopo aver decompresso l'archivio, troverai tre cartelle al suo interno: css, fonts e js. E questo è tutto ciò che serve per lavorare con questo framework. Anche se no, ne avrai bisogno (personalmente utilizzo Notepad++, ma ha molti concorrenti degni, per non parlare).
Diamo un'occhiata, . Ora ci sono sei file, anche se recentemente erano quattro. In realtà, si tratta di due serie di tre file ciascuna. Ad esempio, il file bootstrap.css e bootstrap.min.css contengono lo stesso codice CSS, ma differiscono in quanto il codice nel file bootstrap.css è facile da leggere perché è formattato di conseguenza:
E il codice nel file bootstrap.min.css è compresso per ridurre la dimensione del file (tutti gli spazi e le interruzioni di riga vengono rimossi da esso - leggi informazioni) ed è una riga enorme, molto difficile da leggere.
Pertanto, il file bootstrap.min.css diventa un quarto più leggero del file bootstrap.css senza perdere funzionalità. Bene, il file bootstrap.css.map è apparso nella distribuzione Bootstrap 3 abbastanza recentemente. Per quanto il mio scarso cervello mi permette di comprenderne lo scopo, consente agli strumenti di sviluppo (ad esempio quelli integrati nei browser Chrome o Firefox) di funzionare con codice CSS compresso come se non fosse stato compresso. In generale, è una cosa oscura che non ho ancora capito.
Lo stesso si può dire dei file. Non erano presenti nella seconda versione di Bootstrip. Il fatto è che Bootstrap 3 viene fornito con il cosiddetto "design piatto" (senza sfumature, ombre, ecc.). Pertanto, abbiamo aggiunto qui il nostro tema come fogli di stile aggiuntivi, che puoi collegare separatamente e aggiungere ulteriori elementi al tuo sito.
Ci sono quattro file con i caratteri. È lo stesso carattere, è disponibile solo in quattro formati diversi. Questi caratteri supportano le icone dei glifi a nostra disposizione (serie di icone che possono essere utilizzate nel design). Come accennato in precedenza, è possibile modificarne le dimensioni (o i colori) poiché si tratta di grafica vettoriale. Parleremo più approfonditamente delle icone dei glifi più avanti.
esistono due file script Java bootstrap.js e bootstrap.min.js, che differiscono solo per il fatto che da quest'ultimo sono stati rimossi tutti gli spazi e le interruzioni di riga, motivo per cui il suo codice è diventato praticamente illeggibile da un punto di vista umano, ma non ha perso nulla dal punto di vista del browser (della macchina). E, naturalmente, è diventato più facile. Oltre a questo file, quando lavoriamo con Bootstrap, molto probabilmente dovremo utilizzare molti altri file js, ma ne parleremo più avanti.
Connessione dei file CSS e JS di Bootstrap al file HtmlQuindi abbiamo esaminato tutti i file forniti con questo framework. Ora puoi iniziare ad usarlo per creare la tua prima pagina Html per comprendere la bellezza di questo processo. Prendiamo come esempio un normale documento web vuoto con markup di base (il cosiddetto “fish”).
Titolo della pagina
Spero che tu abbia già incontrato questa struttura e che tu abbia capito che aiuta il browser a capire come interpretare il codice scritto di seguito, e i tag head e body formano rispettivamente il servizio “head” (ciò che non viene visualizzato nella pagina web) e il “corpo” (quello che verrà visualizzato direttamente nella pagina).
Basta copiare il seguente codice in un nuovo file creato nel tuo editor Html e salvare il risultato nella cartella Bootstrap 3 con l'estensione Html e il nome index.html. Quelli. dovrebbe essere allo stesso livello delle cartelle css, fonts e js:
Ora nel “pesce” chiamato index.html, aggiungi il seguente meta tag (tra i tag head, ad esempio, nell'area meta charset):
Il meta tag viewport è solitamente sempre incluso quando si lavora con il responsive design. Perché è necessario? Per ridimensionare correttamente lo schermo. In questo caso, non importa da quale dispositivo l'utente ha effettuato l'accesso al tuo sito (con uno schermo grande o piccolo): la pagina web cambierà dimensione a seconda del dispositivo.
Includi un foglio di stile dalla cartella BootstrapSuccessivamente, avrai bisogno dell'arsenale Bootstrap utilizzando un tag che indichi il file in esso contenuto (ha una dimensione più piccola).
Oltre al file di stili disponibile nella distribuzione Bootstrap, ne creeremo un altro con i nostri stili, il cui collegamento potrà essere immediatamente registrato nell'“header” di index.html.
Bene, in realtà dovresti creare un file manual.css vuoto e copiarlo nella cartella CSS del nostro framework.
Il risultato è qualcosa del genere:
Titolo della pagina
Collegamento della libreria jQueryOra possiamo iniziare a connettere i file di script Java al nostro documento web. Ne abbiamo bisogno per far funzionare il file index.html con Bootstrap 3. Uno di questi file sarà js dal framework stesso e l'altro sarà la libreria jQuery. Cominciamo con esso. A suo modo, anche questo è un framework utilizzato ovunque (nei CMS, nei framework di responsive design e in molti siti Internet).
Esistono due modi per connettere la libreria jQuery al nostro documento Html: scaricare la libreria e collegarla ad essa oppure utilizzare la rete di distribuzione della libreria jQuery (CDN). Nel primo caso, hai la garanzia che mentre il tuo sito è in esecuzione, questa libreria sarà sempre caricata (non dipendi da fonti esterne, che teoricamente potrebbero diventare temporaneamente non disponibili).
Il vantaggio di connettere jQuery tramite una CDN è che l'utente può già avere un file di questa libreria memorizzato nella cache del browser. Perché jQuery pesa parecchio, questo consentirà al tuo progetto di aprirsi molto più velocemente nei browser di tali utenti. La rete di distribuzione della biblioteca è raramente offline, quindi la probabilità di finire nei guai utilizzando il metodo di connessione CDN è estremamente bassa.
Come mettere in pratica tutto questo? Vai alla pagina ufficiale della libreria jQuery - jquery.com. Quindi, se vuoi scaricare questa libreria, fai clic sul pulsante grande sul lato destro dello schermo.
jQuery ha due versioni: 1.x e 2.x. Considerando i browser attualmente supportati, probabilmente è meglio utilizzare la prima versione (supporta IE 8, che è ancora abbastanza comune sui computer degli utenti della rete).
Il codice per richiamare i file script Java viene solitamente inserito tra i tag head. Ma questo non è del tutto corretto. È meglio chiamare gli script prima del tag body di chiusura. Perché? Il fatto è che, ad esempio, la chiamata dei file di markup di stile deve essere eseguita prima o contemporaneamente al caricamento del contenuto affinché possa essere visualizzato correttamente. Ma i file JS sono responsabili della funzionalità della pagina e non del suo aspetto. Ciò significa che non avremo bisogno di questa funzionalità finché il documento non sarà completamente caricato, quindi non sarà necessario inserire una chiamata a un file di script Java tra i tag Head.
Se inserisci comunque le chiamate JS nella “head”, dovrai attendere che si carichino completamente per poter vedere la pagina. Avrai la sensazione che il sito si stia caricando lentamente e questo riduce seriamente la sua attrattiva per i visitatori. Ma se la chiamata jQuery viene inserita nella parte inferiore del documento (prima del tag Body di chiusura), tutte le altre informazioni verranno caricate prima di questa libreria. Avrai la sensazione di un sito più veloce e reattivo.
Il codice universale per chiamare jQuery (senza scaricare questa libreria sul tuo server) utilizzando la rete di distribuzione delle librerie jQuery (CDN) descritta sopra sarà simile al seguente:
Per distinguere questo codice dal resto del codice che vivrà all'interno dei tag Body, puoi aggiungere una direttiva con un'etichetta esplicativa. Ad esempio, in questo modo:
Colleghiamo il file Bootstrap JS e il file Answer.js
Ebbene, ci servirà anche (preferibilmente uno in cui il codice sia compresso per ridurne le dimensioni, cioè con la parola min nel titolo). Apparirà così:
Probabilmente è chiaro che se desideri scaricare la libreria jQuery dal tuo server, dovrai scaricarla, inserirla nella cartella JS e scrivere per essa esattamente lo stesso codice chiamante di bootstrap.min.js. Ma ti consiglio comunque di prenderlo dal CDN, come mostrato poco sopra.
Tieni presente che il codice della chiamata bootstrap.min.js dovrà essere inserito dopo la chiamata jQuery, perché dipende da questa libreria e deve essere caricato prima.
Quindi, dobbiamo ancora connettere Answer.js . Cos'è? Questo è uno script progettato per aiutare le versioni precedenti di Internet Explorer a comprendere HTML 5 e risolvere altri problemi di compatibilità con questo "strano" browser. Puoi scaricare questo file: anche in questo caso esiste una versione compressa e normale (leggibile a occhio nudo).
Basta cliccare su Answer.min.js e copiare il suo codice nella finestra che si apre. Questo, tuttavia, non è così facile da fare, perché consiste in una lunga fila. Secondo me sarebbe più semplice cliccare sul pulsante “Raw”. In questo caso si aprirà una pagina con solo il codice del file Answer.min.js, che potrà essere facilmente selezionato e copiato premendo Ctrl+A sulla tastiera:
Il codice inserito negli appunti deve essere incollato in un nuovo file nel tuo editor Html (per me è Blocco note con due segni più) e salvato con il nome Answer.min.js nella cartella JS di Bootstrap 3.
Nel file index.html, la connessione Answer.min.js apparirà normale:
Ma c'è una sfumatura. Questo codice sarà necessario perché i suoi sviluppatori lo consigliano. Altrimenti, in alcune versioni precedenti di Explorer, prima che venga caricato il file Answer.min.js, gli utenti potrebbero visualizzare per un secondo contenuto senza stile (solo testo non formattato e senza tag). Per evitare ciò, caricano Answer.min.js prima di caricare la pagina web.
Il file index.html risultante nella cartella Bootstrap 3 sarà simile a questo:
Titolo della pagina
Ora abbiamo tutto per costruire un sito su Bootstrap. Abbiamo tutti gli script e gli stili Java necessari che abbiamo incluso. Puoi iniziare a costruire il sito.
Continua >>> (Puoi iscriverti alla newsletter per non perderla)
Ed ecco la continuazione: (ma ti iscrivi comunque - ci sarà molto più interessante e utile).
Buona fortuna a te! A presto sulle pagine del blog del sito
Potresti essere interessato
Sistema a griglia in Bootstrap 3 e un esempio di come lavorarci
Dall'autore: ti saluto. In questo articolo parlerò ancora una volta di come installare Bootstrap, ma questa volta presteremo maggiore attenzione alla personalizzazione del framework. L'articolo sarà piuttosto lungo, quindi se sei interessato alla personalizzazione, sii paziente e leggilo per intero. L'articolo sarà diviso in 2 parti: modifica delle impostazioni e dei componenti di Bootstrap e tematizzazione, ovvero modifica dell'aspetto.
Ho già parlato molto dell'installazione standard negli articoli precedenti. Tutto è semplice qui. Andiamo al sito ufficiale getbootstrap.com, facciamo clic su Come iniziare e selezioniamo la prima opzione. Pertanto, scarichiamo la versione completa di bootstrap con tutti i componenti js e css.
Bootstrap CDN offre l'opportunità di connettere il framework da un archivio CDN senza scaricare i suoi file sul tuo computer. Naturalmente in questo caso non si può parlare di alcuna personalizzazione.
Personalizzazione del quadroMa il fatto è che bootstrap contiene molti componenti per impostazione predefinita e alcuni di essi semplicemente potrebbero non esserti utili durante lo sviluppo di un sito specifico. Ad esempio, stai progettando un negozio online. Potresti non aver bisogno di modali e descrizioni comandi e potresti non aver bisogno di molti dei componenti CSS. In questo caso sarebbe saggio non includere queste componenti nel quadro.
Oppure stai creando un semplice blog. Diciamo che non hai davvero bisogno di nulla lì, quindi puoi lasciare solo la mesh e un paio dei componenti più importanti.
Scegliere solo ciò di cui hai bisogno è un approccio professionale alla creazione di siti Web e all'utilizzo di Bootstrap. Per impostazione predefinita, la versione non compressa degli stili CSS del framework nell'ultima versione pesa 143 kilobyte. E gli script sono più di 60 kilobyte. Sì, se comprimi il codice, puoi ridurre il peso del 20-40%, ma i file non saranno comunque dei più leggeri.
Se, ad esempio, disabiliti tutti i componenti e lasci solo la griglia (questo viene fatto molto spesso), il peso del CSS sarà solo di 15-20 kilobyte e in forma compressa un altro paio di kilobyte in meno. In questo modo otterrai la massima velocità e ottimizzazione del tuo progetto.
Ok, era solo una teoria. Per personalizzare il framework, visita lo stesso sito ufficiale e vai alla voce Personalizza.
Selezione dei componenti necessariIl primo passo qui è configurare quali componenti desideri includere nella tua versione di Bootstrap. Cominciamo con il CSS:
Stili supporto di stampa: query supporto per la stampa. Se non prevedi di stampare le pagine del sito, puoi disabilitarlo.
Tipografia, codice, tabelle, moduli e pulsanti sono tutte cose a cui puoi personalizzare lo stile nei CSS, se lo desideri davvero. Naturalmente, ciò richiederà tempo, ma se il design dei tuoi elementi è molto diverso da quello offerto dal framework per impostazione predefinita, puoi disabilitare tutti questi stili CSS e scriverli tu stesso.
Grid System è in realtà una griglia. Non vedo alcun motivo per disabilitarlo, perché questo è il potere principale del framework. È grazie alla griglia che puoi adattare facilmente i modelli a qualsiasi dispositivo, e oggi nell'era del traffico mobile questo è estremamente importante. Non lo spegniamo in nessun caso.
Utilità reattive – utilità adattive, consiglio inoltre di non disabilitarle mai. Parleremo delle utilità adattive nel prossimo articolo, dove esamineremo in dettaglio il sistema a griglia. Si tratta di classi che permettono di nascondere un elemento o renderlo visibile ad una certa larghezza dello schermo. Molto comodo e utile.
Si tratta, ad esempio, di elementi come gruppi di elenchi, barre di pulsanti, icone, pannelli, avvisi, impaginazione, breadcrumb, ecc. Puoi anche disabilitare il carattere dell'icona. Vale la pena farlo nel caso in cui non hai affatto bisogno delle icone sul sito o stai collegando un altro set. In realtà, dovresti sederti e pensare a cosa ti serve da tutti i componenti presentati e cosa no. Ogni singolo sito avrà il proprio set, perché ogni sito ha un design e funzionalità diversi.
Componenti Javascript
Si tratta di menu a discesa, descrizioni comandi, finestre modali e dispositivi di scorrimento. Se non ti serve niente di tutto questo, spegnilo. In alcuni casi, tutti i componenti possono davvero tornare utili quando il tuo sito ha un menu a discesa, uno slider nella pagina principale e finestre modali. In alcuni casi, al massimo 1-2 componenti possono essere utili, quindi non è necessario allungare il codice, disabilitare i componenti non necessari.
Plugin JqueryQui puoi disabilitare i plugin della libreria jquery che aiutano i componenti javascript a funzionare correttamente. Di conseguenza, se non utilizzi uno slider sul tuo sito, non hai bisogno di un plug-in per creare caroselli, se non hai bisogno di tooltip, disabilita tooltips.js, ecc.
Il plugin scrollspy monitora la posizione del testo e, a seconda di ciò, evidenzia l'una o l'altra voce di menu. Di solito questa funzionalità è necessaria sulle pagine di destinazione; non l'ho praticamente mai vista sui siti normali. E così via. Osserva attentamente cosa ti serve e cosa no.
Meno variabiliSuccessivamente, si aprirà davanti a te un oggetto enorme, in cui ci saranno molti sottoelementi con impostazioni per Meno variabili. Qui puoi modificare quasi tutto: colori, dimensioni dei caratteri, punti di interruzione, numero di colonne nella griglia, rientri, ecc.
Naturalmente, per fare questo devi conoscere almeno le basi di Less o almeno navigare in modo intuitivo tra questi moduli.
Ad esempio, se vedi la variabile @font-family-base, devi almeno comprendere intuitivamente che è responsabile del nome del carattere, che è il carattere di base sul sito. Bene, la variabile @font-size-base imposta la dimensione del carattere di base. Per impostazione predefinita nel bootstrap è 14 pixel.
Puoi modificare tutti questi campi. Basta cambiare 14 in 20 e ora puoi scaricare un framework in cui la dimensione predefinita del carattere è 20 pixel. Di conseguenza, puoi immediatamente regolare la dimensione delle intestazioni, ecc.
Impostazione della grigliaMolto interessanti per noi anche le impostazioni del sistema a griglia, eccole:
Come puoi vedere, puoi modificare il numero di colonne e la larghezza dei rientri tra di loro in pochi secondi. La variabile grid-float-breakpoint imposta il punto in cui il menu mobile si comprime in un'icona.
Quadro Bootstrap 4 Avvio rapido
Impara le basi di Bootstrap 4 con un esempio pratico di progettazione di un blog da zero
Se modifichi il valore, ad esempio, in @screen-md-min, già con una larghezza di 991 pixel o inferiore si verificherà il collasso. Puoi anche rimuovere questa variabile e scrivere il valore in pixel. Ad esempio, 520 pixel. Quindi il collasso del menu avverrà solo su smartphone e cellulari.
In realtà, la pagina di personalizzazione di Bootstrap ha molte impostazioni, ma in generale questo metodo di personalizzazione (utilizzando la pagina Personalizza sul sito ufficiale) non è il più veloce e conveniente. Successivamente ti mostrerò il modo più veloce.
Utilizza la pagina Personalizza quando devi apportare 2-10 modifiche al framework o semplicemente disabilitare i componenti necessari. Se intendi modificare molti più valori, dovrai utilizzare un metodo diverso.
In realtà, quando configuri la tua versione del framework, fai clic sul pulsante grande in fondo alla pagina. Compilerà una versione di Bootstrap per te e la scaricherà sul tuo computer. Quindi tutto ciò che devi fare è connetterti e utilizzare. Ho già parlato della connessione negli articoli precedenti (compreso come farlo su WordPress).
Scaricare meno fonti e modificarleCome ho già detto, se devi apportare molte modifiche al codice sorgente del framework e vuoi vedere le modifiche immediatamente, allora avrai bisogno di meno fonti. Puoi scaricarli nello stesso posto della versione completa del framework, nella sezione Per iniziare.
Per lavorare con le fonti Less e modificarle è necessario:
Almeno una certa conoscenza di CSS e less o di un altro preprocessore
Less compilatore (può essere scaricato gratuitamente)
In realtà non mi soffermerò nel dettaglio sulla personalizzazione tramite meno fonti, ma questo è il metodo migliore, perché non sarà necessario andare alla pagina Personalizza 100 volte e compilare sempre più nuove versioni del framework.
Puoi vedere maggiori dettagli su come lavorare con meno codici sorgente nel nostro codice a pagamento, creato da Andrey Kudlay. Lì, il lavoro con il framework viene discusso in modo più dettagliato.
Temi Bootstrap o modifica dell'aspetto degli elementiPer impostazione predefinita, nella versione completa del framework, puoi trovare anche il file bootstrap-theme.css nella cartella css. Non è necessario collegarlo al sito. Quali funzioni svolge? Il file è necessario esclusivamente per modificare, se necessario, gli stili degli elementi necessari.
Questo stesso ruolo può essere svolto dal tuo style.css, in cui puoi anche sovrascrivere gli stili. Il tema Bootstrap non è un file richiesto, viene utilizzato piuttosto per l'ordine. Ad esempio, hai 3 file:
bootstrap.css – ovviamente, questo è il codice del framework stesso;
bootstrap-theme.css – qui sovrascrivi gli stili per gli elementi bootstrap;
style.css – scrivi gli stili per i tuoi elementi in questo file.
Quindi avrai ordine nel tuo codice e nella struttura del tuo progetto. Ma nessuno ti vieta di eseguire tutte le operazioni in un unico file - style.css e di non utilizzare affatto il file del tema.
La cosa più importante è includere il file del tema e il proprio CSS nel markup html più tardi del file con il codice del framework, in modo che gli stili vengano ridefiniti con successo.
Un esempio di come funziona la tematizzazioneCome ho già detto, per impostazione predefinita Bootstrap include il tema bootstrap. Prova a collegarlo. Noto, connettiti dopo il file principale.
Per impostazione predefinita, i pulsanti in Bootstrap hanno questo aspetto:
Ed ecco come cambia il loro aspetto dopo aver collegato il file al tema:
Come puoi vedere, appare una leggera sfumatura. Di conseguenza, puoi riscrivere il codice nel file del tema bootstrap e ottenere i tuoi stili per i pulsanti. Ma potresti chiederti, perché non apportare queste modifiche direttamente in bootstrap.css? Bene, il fatto è che vengono costantemente rilasciate nuove versioni del framework e, se decidi di eseguire l'aggiornamento, sarà difficile implementare le modifiche nella nuova versione. È considerata buona norma per uno sviluppatore non toccare il codice sorgente quando è possibile creare un file separato e descrivere lì le modifiche. È molto più intelligente e conveniente.
Come installare nuovi temi Bootstrap scaricati da Internet?Esistono molti siti, per lo più stranieri, dove puoi scaricare gratuitamente un sacco di temi e modelli. Per evitare confusione, consideriamo un sito web progettato utilizzando Bootstrap come modello e un tema come un insieme di regole CSS che sovrascrivono l'aspetto standard degli elementi.
Tali temi possono essere scaricati, ad esempio, da bootswatch.com/ e utilizzando un motore di ricerca puoi trovarne dozzine di altri.
Il principio generale per l'installazione di tali temi dipende dal sito da cui li scarichi. Se riesci a scaricarlo nel formato del tema bootstrap, bene, scaricalo e collegalo. Su bootswatch, ad esempio, devi scaricare bootstrap.css e sostituire con esso il file di stile del framework standard. C'è anche un'opzione con meno fonti.
Linea di fondoBene, oggi abbiamo visto come installare e personalizzare Bootstrap. Spero che queste informazioni ti siano state utili. Sopra, ho già fornito un collegamento a un corso sul layout adattivo utilizzando questo framework. Utilizzando Bootstrap puoi creare siti Web 3-4 volte più velocemente e il risultato sarà altrettanto buono, o addirittura migliore, perché quando scrivi tu stesso gli stili CSS, puoi sempre tralasciare qualcosa e fare confusione da qualche parte.
In generale, se desideri comunicare con Bootstrap per nome, acquista sicuramente il corso e inizia a impararlo. In effetti, puoi finirlo in un paio di giorni e durante questo periodo farai molta pratica. Si può dire che molti mesi trascorsi a leggere articoli e libri su Bootstrap ti avvantaggeranno meno di un paio di giorni di pratica effettiva nello sviluppo di modelli complessi. Ok, è qui che concludo l'articolo e ti auguro un rapido apprendimento del framework.
Quadro Bootstrap 4 Avvio rapido
Impara le basi di Bootstrap 4 con un esempio pratico di progettazione di un blog da zero
In questa lezione impareremo come scaricare e connettere il framework Bootstrap (versione 3 o 4) al sito.
Kit di strumenti di apprendimento BootstrapSet minimo di strumenti (programmi) per la creazione di progetti web utilizzando il framework Bootstrap:
- editor di testo per lavorare con il codice (Blocco note, Parentesi, Blocco note++, ecc.);
- browser (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer, ecc.).
La creazione di un progetto web il cui design è basato sul framework Bootstrap inizia sempre con il download. Esistono vari modi per scaricare il framework Bootstrap. Ad esempio, tramite un collegamento situato sul sito getbootstrap.com o utilizzando il gestore pacchetti npm, Composer, Bower o altri. Come farlo dipende dalla tua esperienza o situazione specifica.
Come installare il framework Bootstrap utilizzando i gestori di pacchetti, nonché come costruirlo utilizzando Grunt, puoi leggere in questo articolo.
Il modo più semplice per scaricarlo è utilizzare il collegamento. Ci sono 2 collegamenti sul sito Bootstrap.
Il primo collegamento contiene file CSS e JavaScript pronti all'uso. Questo assembly viene utilizzato principalmente per lo studio del framework o per l'utilizzo in progetti, la cui progettazione può essere realizzata negli stili predefiniti stabiliti dagli autori.
Scarica Bootstrap 3.4.1 Scarica Bootstrap 4.3.1Il secondo collegamento contiene il framework nel codice sorgente. Questa versione è più conveniente per lo sviluppo di siti Web, perché... rende molto semplice modificare gli stili, la combinazione di colori dei componenti, configurarli, ecc. Ma questi file sorgente, prima di essere utilizzati sulla pagina, dovranno essere compilati e minimizzati. Questo processo è solitamente automatizzato, ad esempio, utilizzando Gulp.
Codici sorgente Bootstrap 3.4.1 Codici sorgente Bootstrap 4.3.1 Decompressione dell'archivio BootstrapDopo aver scaricato l'archivio (con file CSS e JavaScript pronti all'uso), è necessario decomprimerlo nella directory del proprio progetto web.
Se guardi l'archivio, noterai che ha i seguenti contenuti (usando Bootstrap 3.4.1 come esempio):
Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── j s/ │ ├ ── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular. ttf └ ── glyphicons-halflings-regular.woff
La directory css contiene gli stili del framework Bootstrap e la directory js contiene plugin per far funzionare alcuni componenti. I plugin sono scritti utilizzando le funzioni della libreria jQuery. Pertanto, prima di Bootstrap JS è necessario includere la libreria jQuery.
Come puoi vedere, l'archivio contiene 2 versioni di file CSS e JavaScript, ad es. con e senza il suffisso min. La versione del file con min non è diversa da quella senza min , è semplicemente minimizzata (compressa).
In produzione (su un sito di produzione), è preferibile utilizzare versioni ridotte dei file. Questi file sono di dimensioni più ridotte e quindi garantiscono un caricamento più rapido delle pagine del sito.
Le versioni non minimizzate sono più comode da usare durante lo sviluppo, così come per lo studio.
Oltre a questi file, questo archivio include anche il carattere dell'icona "Glyphicons". Il carattere Glyphicons presenta oltre 250 icone del set Glyphicon Halflings. Il carattere viene presentato utilizzando 4 file: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff).
Una tale varietà di formati per lo stesso carattere è necessaria per garantirne la visualizzazione in tutti i browser.
Puoi leggere le icone nel formato dei caratteri, nonché i vantaggi e gli svantaggi che presentano, in questo articolo.
L'archivio del framework Bootstrap 4 non è praticamente diverso da Bootstrap 3. La sua principale differenza è che non contiene il carattere "Glyphicons". Se hai bisogno di icone di caratteri, dovrai collegarle tu stesso. Ad esempio, utilizzando uno dei seguenti set: FontAwesome, Octicons, Glyphicons, IcoMoon o altri. Se non desideri utilizzare un carattere già pronto, ma creane uno tuo, che consisterà solo delle icone necessarie, utilizza. questa informazione.
Inoltre, l'archivio Bootstrap 4 contiene anche i file bootstrap-grid.css e bootstrap-reboot.css. Questi file sono necessari solo per coloro che non necessitano dell'intero framework, ma solo di una parte di esso.
Il primo file (bootstrap-grid.css) contiene la griglia Bootstrap e il secondo (bootstrap-reboot.css) è un normalizzatore che imposta gli stili di base in modo che siano gli stessi per tutti gli elementi HTML in tutti i browser.
Connessione di Bootstrap a una pagina HTMLIl processo di installazione del framework Bootstrap 3 consiste nel collegare i seguenti file alla pagina HTML 5:
Nota: è meglio includere i file JavaScript prima del tag di chiusura body(), poiché ciò garantirà che il contenuto principale della pagina web venga caricato e visualizzato più velocemente.
...
Il collegamento del framework Bootstrap 4 avviene in questo modo:
...
Puoi anche connettere Bootstrap 4 utilizzando una CDN (non è necessario scaricare Bootstrap nel progetto):
Copiato
...
CDN Bootstrap 3.4.1:
Copiato
Per testare la funzionalità del framework, creeremo un pulsante che, quando toccato, visualizzerà un tooltip popover.
Portami il cursore $(function () ( $("").popover((trigger:"hover")); ));
