Bootstrap 4 è un toolkit che include molte nuove e interessanti funzionalità, come Flexbox, SASS per stili CSS, mappe, compatibilità Font Awesome, ecc.

Tutte queste funzionalità ti aiuteranno a portare i tuoi progetti web a un livello superiore usando gli ultimi standard di sviluppo e web design. Abbiamo messo insieme un elenco di alcuni dei migliori modelli basati su Bootstrap 4 disponibili per download gratuitocosì come diversi modelli premium Bootstrap 4 di alta qualità.

Esistono molti set di interfacce utente Bootstrap 4 disponibili per l'avvio di un progetto di web design. Inoltre, in questo post esamineremo molti modelli creati utilizzando Bootstrap 4 in molti stili diversi, come modelli di pagine di destinazione, modelli del pannello di amministrazione, modelli di blog, modelli di portfolio, ecc.

Se stai iniziando il tuo viaggio in Bootstrap 4, ti consigliamo di utilizzare il set popolare. interfaccia utentecome Paper Kit 2, che si basa su Bootstrap 4 e offre componenti progettati in modo professionale e molte sezioni e pagine di esempio predefinite. Un kit di interfaccia utente come Paper Kit 2 può aiutarti a lungo termine e ti costerà meno se intendi creare diversi siti con Bootstrap 4. Hanno anche una versione gratuita.

Abbiamo diviso la raccolta di modelli basati su Bootstrap 4 in diverse sezioni per semplificare la ricerca del modello di cui hai bisogno. Puoi andare in una qualsiasi delle sezioni usando i link sottostanti.

Bootstrap 4 Modelli in arrivo

Il modello Coming Soon viene utilizzato prima del lancio effettivo del sito Web ed è una sorta di "stub".

Questi modelli in genere includono un timer per il conto alla rovescia e offrono agli utenti la possibilità di contattare i proprietari di siti Web o registrarsi per una notifica di avvio.

Vedi sotto il modello Prossimamente creato usando Bootstrap 4.

Prossimamente Bootstrap 4 (gratuito)

Questa venuta presto modello di bootstrap 4 creato dal team in TemplateFlip. Ha un'immagine di sfondo a schermo intero, nonché tipografia moderna e icone di simboli sociali Font Awesome.

Il modello ha già un modulo di iscrizione e-mail incorporato. Questo modulo viene visualizzato quando si fa clic sul pulsante "Avvisami" (ita "NOTIFY ME").

Il modello è completamente gratuito con licenza CCA3 e può essere utilizzato sia per progetti personali che commerciali.

Fluido - modello animato disponibile a breve (a pagamento)

Fluid è un modello animato di prossima generazione creato utilizzando Bootstrap 4. Offre quattro diverse opzioni: immagini di sfondo, immagine di sfondo, cursore di sfondo e layout minimo.

Le animazioni sono dotate di CSS3 e un modello PSD è anche fornito con download.

Bootstrap 4 modelli di pagina di destinazione

I modelli di pagine di destinazione vengono spesso utilizzati per dimostrare le funzioni di prodotti, servizi o applicazioni. Spesso hanno pulsanti di invito all'azione in modo che gli utenti possano provare o esplorare un prodotto / servizio. Possono anche includere sezioni come recensioni degli utenti e tabelle di confronto delle caratteristiche, prezzi.

Di seguito posizioniamo i modelli di Pagina di destinazione gratuiti e a pagamento creati utilizzando Bootstrap 4.

Atterraggio materiale (gratuito)

Material Landing è un modello di landing page creato utilizzando il kit di interfaccia utente MDB e Bootstrap 4.

Ha un aspetto pulito per il codice che è l'ideale per creare una landing page con ottimizzazioni per un prodotto o sito Web per un'agenzia o azienda.

Il modello ha sezioni sviluppate nella progettazione del modello HTML5 per visualizzare le funzioni di prodotto / azienda, i migliori progetti, il piano tariffario e i membri del team.

Quando si scorre la pagina di destinazione, vengono riprodotte animazioni entusiasmanti.

Inizia semplice (gratuito)

Start Simple è un altro modello gratuito Pagina di destinazione per start-up e piccole imprese, creata dal team TemplateFlip.com.

Il modello si basa su Bootstrap 4 e contiene uno scorrimento di parallasse nell'intestazione e un dispositivo di scorrimento animato adattivo per la sezione delle recensioni degli utenti.

Fantastica app (gratuita)

Awesome App è un modello di Pagina di destinazione gratuito creato utilizzando Bootstrap 4 e PaperKit 2. È adatto per la creazione di siti Web e pagine di destinazione. app mobilicosì come i prodotti software.

Il modello è stato sviluppato dal team di TemplateFlip.com e ha una landing page dal design creativo con splendidi colori.

Il modello ha sezioni per dimostrare le capacità di applicazioni, schermate di applicazioni, recensioni degli utenti, collegamenti per scaricare applicazioni, ecc.

E sono facili da personalizzare ed espandere.

Pixel - Modello HTML5 di atterraggio di app creative

Se sei appassionato di creatività e cerchi un design fantastico per la tua pagina di app / prodotto o obiettivi aziendali, allora questo modello premium di Bootstrap 4 Pixel sarà la soluzione migliore per te.

Offrendo più di 15 design diversi, questo modello ha l'integrazione di MailChimp e un modulo di feedback funzionante.

Bootstrap 4 Modelli di avvio / agenzia

Il modello di avvio / agenzia è adatto a qualsiasi attività commerciale che desideri dimostrare i propri servizi.

Di seguito sono riportati alcuni dei migliori modelli Bootstrap 4 adatti a startup e aziende.

Agenzia (gratuita)

Come suggerisce il nome, questa è un'agenzia gratuita e un modello di sito Web per piccole imprese che è stato creato usando Bootstrap 4. Ha sezioni della home page, come la griglia del portfolio, la sequenza temporale adattiva, l'elenco dei membri del team e molto altro.

Tema Bell Bootstrap 4 (gratuito)

Bell è un modello Bootstrap 4 di una pagina adatto a qualsiasi tipo di sito aziendale. Include blocchi di parallasse con scorrimento animato ed è disponibile gratuitamente e ha anche versione a pagamentoche include il supporto e-mail premium.

Fitness (gratuito)

Fitness è un modello di sito Web di origine gratuito e pulito creato utilizzando HTML5, Sass, jQuery, Bootstrap 4 e Gulp.

La versione PSD di questo modello è inclusa anche nella versione gratuita.

Bootstrap 4 Modelli del pannello di amministrazione

Bootstrap è la scelta predefinita per molti web designer e sviluppatori quando si tratta di creare un modello di dashboard del pannello di amministrazione del sito Web o dell'applicazione. Utilizzando Bootstrap, è possibile creare un pannello di controllo amministrativo adattivo con controlli avanzati e interfacce utente.

Di seguito puoi trovare i modelli del pannello di controllo Admin Bootstrap 4 gratuiti e a pagamento.

Dashboard Bootstrap Light (gratuito)

Questo è il modello di amministrazione Bootstrap 4 creato da CreativeTim.

Ha un design semplice e pulito e offre una serie di componenti predefiniti, plug-in e pagine modello di esempio per iniziare creando pannelli di amministrazione per applicazioni Web, nonché CMS o CRM.

Questo è un modello di amministrazione Bootstrap gratuito che può essere completamente utilizzato nei tuoi progetti. Se hai bisogno di componenti aggiuntivi, plugin e pagine di esempio, puoi eseguire l'aggiornamento alla versione PRO.

La versione PRO consente inoltre di accedere alla documentazione completa, ai file SASS e ai file Sketch per il modello.

Amministratore modulare (gratuito)

L'amministratore modulare è un tema di dashboard gratuito e orientato al MIT basato su Bootstrap 4. Questo tema della barra degli strumenti è costruito in un modo modulare che semplifica il ridimensionamento, la modifica e la manutenzione. La documentazione per iniziare con questo modello è fornita nel repository GitHub.

CoreUI Bootstrap 4 Admin (gratuito)

CoreUI è un altro modello Bootstrap (MIT) open source gratuito. CoreUI si basa su Bootstrap 4 e offre 6 versioni: HTML5 AJAX, HTML5 Static, AngularJS, Angular 2+, React.js e Vue.js.

Pagine - Modello Dashboard amministratore Bootstrap 4

pagine - Questo è un modello di dashboard Admin Bootstrap 4 di alta qualità dal design accattivante che offre diversi layout e componenti già pronti, nonché 6 diverse combinazioni di colori.

Ciao a tutti, amici! A metà del 2013 è stato rilasciato Bootstrap 3, che nel corso degli anni si è affermato come un framework CSS conveniente ed estensibile per creazione rapida layout adattivi. Milioni di siti utilizzano con successo questo framework e siamo già abbastanza abituati.

A lezione

Inciampare

Il 18 gennaio 2018 è accaduto un evento importante: è arrivata la tanto attesa beta versione Bootstrap 4basata su modelli Flexbox per il markup, che attualmente supporta già tutti i browser moderni ed è più conveniente e flessibile per gli sviluppatori rispetto al classico modello di markup basato su Float. Ora, con piena fiducia, possiamo dire che non è possibile su Flexes, ma DEVE recuperare!

Risorse aggiuntive per la lezione di Bootstrap 4

Puoi testare tu stesso tutti gli esempi della lezione: Scarica l'archivio
Puoi familiarizzare con la documentazione Bootstrap 4 in modo più dettagliato in ufficio. sito web;
Starter più recente incluso Bootstrap 4: HTML 5 ottimizzato.

Oggi analizzeremo in dettaglio il lavoro con la griglia Bootstrap 4, nel processo confrontandolo con vecchia versione. Questa lezione ti sarà utile non solo se sei nuovo e conosci Bootstrap, ma anche se sei uno sviluppatore esperto e vuoi imparare tutte le regole e le sfumature del layout usando la griglia Bootstrap 4 e gli strumenti Flexbox inclusi in essa.

1. I parametri principali della griglia per impostazione predefinita

Per impostazione predefinita, la griglia Bootstrap 4 è molto simile alla griglia della terza versione, ma ci sono alcune differenze importanti.

Dalla tabella delle opzioni principali, possiamo notare ovvie differenze rispetto alla griglia della terza versione. Ora non esiste un prefisso della classe ".col-xs-", che è responsabile delle autorizzazioni più piccole, invece di esso è indicato un prefisso semplificato ".col-". Si potrebbe erroneamente pensare che il prefisso ".col-" sia responsabile delle autorizzazioni minime. dispositivi mobiliTuttavia, questo non è del tutto vero. Tra le altre cose, il prefisso ".col-" è una delle innovazioni più importanti di Bootstrap 4. È una classe che è responsabile della marcatura automatica delle colonne a qualsiasi risoluzione. Ma ne parleremo più avanti.

Per risoluzioni piccole (piccole), è responsabile il prefisso ".col-sm-" con una richiesta multimediale da 576 pixel. La larghezza del contenitore è di 540 pixel. Le risoluzioni medie vengono elaborate da 768 pixel. La larghezza del contenitore è di 720 pixel. Le risoluzioni di grandi dimensioni funzionano con risoluzioni del dispositivo da 992 pixel. La larghezza del contenitore è di 960 pixel. E il più grande - da 1200 pixel. La larghezza del contenitore è fissata a 1140 pixel.

Si noti che i valori massimi delle query multimediali hanno valori imprecisi con una frazione di ".98" in pixel. Ciò si nota quando si sceglie il metodo di layout Desktop First, in cui la larghezza massima della richiesta multimediale è limitata. Ad esempio, quando si compila Sass "+ media-breakpoint-down (lg)" si ottiene "@media (larghezza massima: 1199,98 px)". Qui, 0,02 pixel vengono liberati per avviare la successiva richiesta multimediale. Tienilo a mente. Nelle future edizioni di Jedi Layout 8, esamineremo questo e molti altri punti di questa lezione con un esempio di vita reale.

2. Layout automatico delle colonne

2.1 Colonne della stessa larghezza

Utilizzando la nuova classe universale ".col", è possibile specificare fino a 12 colonne in una riga (padre ".row"), la cui larghezza verrà calcolata automaticamente in base al numero di elementi e sarà uguale.

Per esempio:

2.2 Impostazione della larghezza di una colonna

Puoi anche impostare esplicitamente la larghezza di una colonna e lasciare il resto automatico.

1 su 3

2 su 3 (ampio)

3 su 3

1 su 3

2 su 3 (ampio)

3 su 3

In questo esempio, il secondo elemento nella terza riga ha la classe ".col-6" e il secondo elemento nella seconda riga ha la classe ".col-5", che occupa il numero corrispondente di colonne a tutte le risoluzioni dello schermo. La larghezza delle colonne rimanenti è reattiva e viene calcolata automaticamente, occupando tutto lo spazio rimanente.

2.3 Contenuto a larghezza variabile

È possibile utilizzare la classe col- (breakpoint) -auto per definire il contenuto con una larghezza variabile, a seconda dello spazio occupato dal contenuto della colonna. Dove breakpoint è la dimensione dello schermo (xl, lg, md o sm).

1 su 3

Contenuto a larghezza variabile

3 su 3

1 su 3

Contenuto variabile a larghezza numero due

3 su 3

Qui vediamo che le due colonne centrali occupano una larghezza corrispondente alla larghezza del contenuto, tuttavia, nella prima riga, grazie alla classe .justify-content-sm-center in .row, l'intera riga è centrata e la larghezza totale dipende solo dalla larghezza della colonna centrale, in mentre la seconda riga si estende per l'intera larghezza disponibile, ma la seconda colonna rimane fissa su tutta la larghezza del contenuto.

2.4 Multi-fila

Grazie a Bootstrap 4, puoi creare più righe (trattini) in una riga. Puoi implementarlo usando la classe ".w-100", che è molto simile al tag "br" e essenzialmente fa semplicemente avvolgere le colonne in una nuova riga.

col

Si noti che questa classe fa parte delle funzionalità aggiuntive di Bootstrap 4 che si connettono al progetto separatamente se si utilizza la versione Sass del progetto Bootstrap e si trovano nella cartella "scss / utilities". Puoi anche collegare altri plug-in da questa cartella al tuo progetto, se necessario.

3. Classi adattive

3.1 Punti di interruzione

Una caratteristica molto interessante di Bootstrap 4 è la possibilità di specificare colonne universali che verranno visualizzate a tutte le risoluzioni. Questa è la classe ".col" menzionata in precedenza. Inoltre, puoi definire una classe che indica il numero specifico di colonne occupate dal contenuto - si tratta di classi con il prefisso ".col- (numero di colonne)", ad esempio ".col-6" ci dice che il contenuto prenderà 6 colonne su 12. B nel caso in cui non sia necessario specificare una quantità specifica, è possibile utilizzare in sicurezza la classe universale ".col".

col

col-8

col-4

3.2 Su dispositivi mobili

È possibile utilizzare il prefisso di classe ".col-sm- (numero di colonne occupate)" per impostare la griglia di base a tutte le risoluzioni tranne la più piccola. Su schermi piccoli, le colonne di tale griglia si piegheranno l'una sotto l'altra. A più autorizzazioni, occuperanno tutto lo spazio che hai definito nelle classi.

col-sm-8

col-sm-4

col-sm

Qui vediamo che la prima riga sui dispositivi con una risoluzione superiore a "sm", ovvero oltre 576 pixel. È diviso in 2 colonne - 8 e 4 su 12 di larghezza, rispettivamente. La larghezza delle colonne nella seconda riga viene calcolata automaticamente, ma alle risoluzioni più piccole, anche queste colonne si sovrappongono l'una all'altra, grazie alla classe ".col-sm".

3.3 Creazione di una griglia composita complessa

Con Bootstrap, puoi creare qualsiasi combinazione di colonne durante la creazione di una griglia. Per ogni colonna, è possibile specificare qualsiasi comportamento a risoluzioni diverse utilizzando le classi adattive. Qui le differenze rispetto alla terza versione sono solo nei nomi delle classi.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

4. Allineamento

Bootstrap 4 si basa su "flexes" e ci offre tutte le funzionalità di questo modello, disponibili in semplici classi già pronte. Tra le caratteristiche: allineamento verticale e orizzontale.

4.1 Allineamento verticale

Superiore

medio

Parte inferiore

Oltre a controllare l'allineamento tramite il genitore ".row", puoi allineare le colonne impostando le classi appropriate per loro:

Superiore

medio

Parte inferiore

4.2 Allineamento orizzontale

Inoltre, Bootstrap 4 ha nel suo arsenale strumenti per l'allineamento orizzontale delle colonne usando il prefisso ".justify-content-" su ".row".

riga justify-content-start

riga justify-content-center

justify-content-end

justify-contenuti-around

justify-content-tra

4.3 Eliminazione di campi tra le colonne

Molto spesso ci sono situazioni in cui è necessario rimuovere i campi tra le colonne. Ad esempio, se si crea una galleria e gli elementi devono essere posizionati da vicino, ad esempio in questo modo:

Per fare ciò, è sufficiente che l'elemento ".row" imposti una classe aggiuntiva ".no-gutter".

col-6 col-sm-4 col-md-4

4.4 Trasferimento di colonne in una nuova riga

Se una riga (.row) viene riempita con un numero totale di colonne superiore a 12, la colonna successiva viene trasferita su una nuova riga.

.col-9

.col-4
9 + 4 \u003d 13 colonne è più di 12. Questo oggetto 4 colonne di larghezza verranno trasferite su una nuova riga.

.col-6
Le seguenti colonne si trovano lungo la linea.

Qui è tutto uguale alla terza versione di Bootstrap.

5. L'ordine degli elementi

5.1 Classi di ordine degli elementi

Puoi usare classi speciali con il prefisso ".order-" per determinare l'ordine degli elementi. Se hai familiarità con il layout Flex, queste regole ti saranno familiari. Bootstrap 4 ti consente di impostare l'ordine degli elementi usando le classi. Puoi impostare direttamente l'ordine (.order-1.order-md-2):

Primo articolo non ordinato

Oppure puoi usare classi speciali che determinano l'ordine del primo e dell'ultimo elemento (.order-first, .order-last):

Prima disordinato

Secondo ordinato come ultimo

Terzo ordinato come primo

5.2 Offset colonna

Per analogia con Bootstrap 3, nella 4a versione esiste anche la possibilità di spostamento della colonna orizzontale, tuttavia questo è implementato in modo leggermente diverso e ci sono classi speciali per questo con il prefisso ".offset-".

5.2.1 Classi di offset

Puoi spostare la colonna a destra usando le classi “.offset-md- *”, che aumentano il rientro sinistro di * il numero di elementi. Dall'esempio seguente, la classe ".offset-md-2" sposta la colonna ".col-md-4" di 2 colonne a destra, il resto degli esempi funziona per analogia:

.col-MD-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

È possibile reimpostare il rientro a tutte le risoluzioni grazie alla classe ".offset - * - 0", dove * è sm, md, lg o xl.

6. Nesting

Si prevede che Bootstrap 4 supporti l'annidamento. Qui tutto funziona allo stesso modo della terza versione: per nidificare le colonne negli altri, è necessario creare una classe figlio ".row" e già nidificare le colonne in essa.

Livello 1: ".col-sm-9"

Livello 2: ".col-8 .col-sm-6"

Livello 2: ".col-4 .col-sm-6"

Abbiamo esaminato le funzionalità principali di lavorare con la griglia Bootstrap 4. Se vuoi saperne di più su tutte le funzionalità del framework in modo più dettagliato, ti consiglio di studiare la documentazione sul sito ufficiale.

Nella prossima lezione prenderemo in considerazione la configurazione della mesh Bootstrap per il tuo progetto specifico usando l'esempio di OptimizedHTML 4 come modello di partenza, vale a dire la configurazione, l'utilizzo di rientri variabili, punti di interruzione, numero di colonne e altro.

In questa lezione impareremo come scaricare e connettere il framework Bootstrap (versione 3 o 4) al sito.

Bootstrap Learning Toolkit

Il set minimo di strumenti (programmi) per la creazione di progetti Web nel framework Bootstrap:

un editor di testo per lavorare con il codice (Blocco note, Parentesi, Blocco note ++, ecc.);
browser ( Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer o altri).

Download di Bootstrap Framework

La creazione di un progetto Web basato sul framework Bootstrap inizia sempre con il download. È possibile scaricare il framework Bootstrap diversi modi . Ad esempio, tramite il collegamento che si trova su getbootstrap.com o utilizzando il gestore di pacchetti npm, Composer, Bower, ecc. Il modo in cui dipende da ciò dalla tua esperienza o situazione specifica.

Come installare il framework Bootstrap usando i gestori pacchetti, così come come costruirlo usando Grunt, puoi leggere in questo articolo.

Il modo più semplice per eseguire il download è usa questo link. Ci sono 2 collegamenti sul sito Web Bootstrap.

Il primo link contiene file CSS e JavaScript pronti all'uso. Questo assemblaggio viene utilizzato principalmente per lo studio del framework o per l'uso in progetti il \u200b\u200bcui design può essere eseguito negli stili impostati dagli autori per impostazione predefinita.

Scarica Bootstrap 3.4.1 Scarica Bootstrap 4.3.1

Il secondo link contiene il framework in codice sorgente . Questa versione è più conveniente per lo sviluppo di siti Web, come rende molto semplice cambiare gli stili, i colori dei componenti, configurarli, ecc. Ma questi file sorgente dovranno essere compilati e minimizzati prima di essere usati nella pagina. Questo processo di solito è automatizzato, ad esempio, usando Gulp.

Codici sorgente Bootstrap 3.4.1 Codici sorgente Bootstrap 4.3.1

Disimballare l'archivio Bootstrap

Dopo aver scaricato l'archivio (con i file CSS e JavaScript pronti per l'uso), è necessario decomprimerlo nella directory del 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 ├── js / │ ├ ── bootstrap.js │ └── bootstrap.min.js └── caratteri / ├── 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 js contiene plugin per supportare alcuni componenti. I plugin sono scritti usando le funzioni della libreria jQuery. Pertanto, prima di Bootstrap JS, è necessario connettere la libreria jQuery.

Come puoi vedere, l'archivio ha 2 versioni di file CSS e JavaScript, ad es. con il suffisso minimo e senza di esso. Versione del file con min non è diverso da senza min, è semplicemente ridotto a icona (compresso).

In produzione (su un sito di produzione) è meglio usare versioni minimizzate di file. Questi file sono più piccoli e quindi forniscono di più avvio veloce pagine del sito.

Le versioni non ridotte a icona sono più comode da utilizzare durante lo sviluppo e per lo studio.

Oltre a questi file, questo archivio include anche il carattere iconico "Glyphicons". Il carattere "Glyphicons" ha più di 250 icone dal set di "Glyphicon Halflings". Il carattere è rappresentato usando 4 file: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff).

Una tale varietà di formati dello stesso carattere è necessaria per garantirne la visualizzazione in tutti i browser.

Informazioni sulle icone nel formato del carattere e su ciò che presentano vantaggi e svantaggi, puoi leggere in questo articolo.

L'archivio del framework Bootstrap 4 non è praticamente diverso da Bootstrap 3. La sua principale differenza è che lui 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, ecc. Se non si desidera utilizzare un font pronto, ma crearne uno proprio, che sarà costituito solo dalle icone necessarie, utilizzare queste informazioni.

Inoltre, contiene l'archivio Bootstrap 4 più file bootstrap-grid.css e bootstrap-reboot.css. Questi file sono necessari solo per coloro che ne hanno bisogno non un intero quadro, ma solo una parte di esso.

Il primo file (bootstrap-grid.css) contiene la griglia Bootstrap e il secondo (bootstrap-reboot.css) contiene un normalizzatore che imposta gli stili di base in modo che siano gli stessi per tutti gli elementi HTML in tutti i browser.

Collega Bootstrap a una pagina HTML

Il processo di installazione del framework Bootstrap 3 consiste nel collegare i seguenti file alla pagina HTML 5:

Bootstrap CSS (bootstrap.min.css);
L'ultima versione della libreria jQuery (necessaria per il funzionamento dei plugin Bootstrap JS);
Bootstrap JavaScript (bootstrap.min.js).

Nota: I file JavaScript devono essere inclusi prima del tag body di chiusura (), poiché ciò consentirà un caricamento e una visualizzazione più rapidi del contenuto principale della pagina Web.

...

Il collegamento del framework Bootstrap 4 è il seguente:

...

Bootstrap 4 può anche essere collegato tramite Cdn (non è necessario scaricare Bootstrap nel progetto):

Copiato

...

CDN Bootstrap 3.4.1:

Copiato

Per testare la funzionalità del framework, creare un pulsante, quando presentato ad esso, verrà visualizzato un suggerimento popup popover.

Il rilascio della nuova versione di Bootstrap4 mi ha spinto a scrivere questa guida perché la nuova versione è significativamente diversa. Ci vorrà del tempo per studiarlo, ma ne vale la pena. Questa guida Non è una guida completa a Bootstrap4 e senza dubbio dovrai consultare la documentazione più di una volta, ma qui esamineremo le cose di base per la creazione di un layout del sito su bootstrap4 in due modi diversi

Installazione

Nel nostro caso, utilizzeremo SASS e quindi utilizzeremo l'installazione completa.

Se hai solo bisogno di Bootstrap per la prototipazione rapida, ha senso usare il metodo CDN. È sufficiente connettere i file che si trovano su altre risorse su Internet, senza installazione (download). Pertanto, li aggiungi al tuo progetto come link.

Puoi semplicemente aggiungere il codice dell'esempio seguente al tuo file di progetto - index.html

Modello di avvio Bootstrap 4

Ciao< /h1>
Questo codice è direttamente dalla pagina di avvio di Bootstrap 4.
Con questo modello, puoi iniziare subito a utilizzare Bootstrap. Il vantaggio è che è facile iniziare, ma lo svantaggio è che ti manca la configurazione che offre Sass.

Installa Bootstrap 4 tramite NPM

Inizieremo il nostro progetto proprio qui in questa fase. Ciò richiederà l'uso di Node.js e del relativo gestore pacchetti per installare il dispositivo di avvio stesso insieme a molti altri pacchetti. Questo ci darà accesso a Sass, riavvio in tempo reale, ecc.

Innanzitutto, assicurati di installare Nodejs aprendo una console o un prompt dei comandi:

Se ottieni il valore della versione corrente, allora tutto va bene e puoi continuare, ma in caso contrario, scarica il programma di installazione appropriato in base al tuo sistema operativo e segui la procedura di installazione con le impostazioni predefinite.

Puoi leggere alcune utili informazioni di ottimizzazione nel mio post - NPM Configuring Gulp and SASS Compilation

Al termine dell'installazione, riavvia la console o la riga di comando e avrai accesso a Node.js.

Creiamo una cartella per il nostro progetto e andiamo ad essa:

Mkdir bs4 && cd bs4

Quindi eseguiamo npm init per creare un file package.json che memorizza semplicemente le nostre dipendenze.

(Nota: il flag -y ci consente semplicemente di saltare le risposte a varie richieste e fornisce invece i valori predefiniti)

Quindi useremo di nuovo npm per installare diversi pacchetti a seconda delle dipendenze di sviluppo:

Npm installa gulp browser-sync gulp-sass --save-dev

SorsoÈ un task manager per esecuzione automatica attività usate di frequente. Vedrai come funziona se sei un principiante.
Sincronizzazione del browser aggiorna automaticamente il tuo browser per noi quando modifichi il file.
gulp-sass ti permette di costruire il nostro progetto, integrandolo con sass.
--save-dev - impostato cartella separata. Nel nostro caso, la cartella del progetto vale a dire - localmente.

Quindi useremo npm per l'ultima volta per installare diversi pacchetti come dipendenze regolari del progetto:

Npm installa bootstrap jquery popper.js --save

bootstrap - ovviamente, questo è un pacchetto bootstrap.
jquery - libreria di script java utilizzata direttamente dal modello bootstrap stesso
popper.js utilizzato anche da bootstrap. Ti permette di posizionare pop-up, tooltip, ecc.

Ora è tempo di aprire il nostro progetto nell'editor di codice. Userò Sublime 3.

Dobbiamo creare una cartella src per il nostro progetto e diverse cartelle in esso contenute. L'albero si presenta così:

/ src / assets / css / js / scss

Inside / src crea anche 4 cartelle come mostrato sopra.

Quindi creare un file index.html all'interno di / src / con i seguenti contenuti:

Layout Bootstrap 4< /title> <meta http-equiv="x-ua-compatible" content="ie=edge"> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/bootstrap.css"> <link rel="stylesheet" href="/css/styles.css"> < /head> < body> <script src="/js/jquery.min.js"> </script> <script src="/js/popper.min.js"> </script> <script src="/js/bootstrap.min.js"> </script> < /body> < /html> </p><p>Sto importando un font Raleway insieme a FontAwesome per le icone. Quindi mi riferisco a bootstrap.css e al file styles.css. Non esistono ancora, ma li creeremo presto.</p><p>Creiamo anche il file styles.scss nella cartella / src / scss /. Introdurremo una variabile rapida e un insieme di regole per garantire che la compilazione di Sass funzioni:</p><p> $ bg-color: rosso; body (sfondo: $ bg-color;)</p><p>Nella cartella principale (cartella del progetto), crea il file gulpfile.js e incolla il seguente contenuto:</p><p>Var gulp \u003d request ("gulp"); var browserSync \u003d request ("browser-sync"). create (); var sass \u003d request ("gulp-sass"); // Compila sass in CSS e autoiniezione nei browser gulp.task ("sass", function () (return gulp.src (["node_modules / bootstrap / scss / bootstrap.scss", "src / scss / *. Scss "]) .pipe (sass ()) .pipe (gulp.dest (" src / css ")) .pipe (browserSync.stream ());)); // Sposta i file javascript nella nostra cartella / src / js gulp.task ("js", function () (return gulp.src ([moduli "node_modules / bootstrap / dist / js / bootstrap.min.js, node" jquery / dist / jquery.min.js "," node_modules / popper.js / dist / umd / popper.min.js "]) .pipe (gulp.dest (" src / js ")) .pipe (browserSync.stream ());)); // Server statico + guardare i file scss / html gulp.task ("serve", ["sass"], function () (browserSync.init ((server: "./src")); gulp.watch (["node_modules /bootstrap/scss/bootstrap.scss "," src / scss / *. scss "], [" sass "]); gulp.watch (" src / *. html "). on (" change ", browserSync.reload );)); gulp.task ("default", ["js", "serve"]);</p><p>Descriverò cosa succede qui in base ai compiti sopra identificati:</p><ol><li><b>compito predefinito</b> - attività predefinita. Quando presentiamo <b>sorso</b> sulla riga di comando, questo gli dice di eseguire come <b>js</b>e svolgere attività - <b>compito</b>.</li> <li><b>compito js</b> Questa è solo un'indicazione di tre diversi file javascript che sono memorizzati nella cartella node_modules che viene creata quando npm install ... viene eseguita e spostata nella nostra cartella / src / js. Pertanto, possiamo includerli nel nostro file HTML sopra specificando / src / js invece della cartella node_modules.</li> <li><b>servire compito</b> avvia un server semplice e monitora i nostri file sass e, se cambiano, chiama l'attività sass. Inoltre provoca la sincronizzazione del browser quando si salva un file * .html.</li> <li><b>compito sass</b> Questa attività prende i file sass bootstrap così come i nostri file sass personalizzati e li compila in semplici CSS e salva questi file CSS nella nostra cartella / src / css</li> </ol><p>Eseguiamo gulp dalla riga di comando:</p><p>Funziona come segue:</p><ul><li>Stai usando <b> m</b> per margine o <b>p</b> per imbottitura</li> <li>Dopo <b>m</b> o <b>p</b> si aggiunge: <b>t</b> (superiore -), <b>b</b> (Bottom-basso) <b>l</b> (sinistra - sinistra), <b>r</b> (mano destra), <b>x</b> (sinistra e destra) <b>y</b> (superiore e inferiore) o niente per tutti e 4 i lati.</li> <li>Dopo un trattino, si specificano le dimensioni da 0 a 5 (5 è il maggior numero di intervalli).</li> </ul><p>Quindi, nel nostro esempio, sembra che dobbiamo usare <i>margine</i> e <i>parte inferiore</i> per spingere le carte sotto di esso.</p><p>Nel contenitore della prima carta aggiungi mb-4:</p><p> <div class="card mb-4"> </p><p>Ora risolto:</p><p><img src='https://i2.wp.com/1.bp.blogspot.com/-vdF8ffY0vvg/WspD9xDehWI/AAAAAAAAEVw/osO-QJ-XIsQvlgU9bxaLqfjzwTh9T60QQCLcBGAs/s640/8-b4.jpg' width="100%" loading=lazy></p> <p>Ecco come è possibile gestire facilmente sia i margini che il riempimento in Bootstrap 4.</p><p>Lavoriamo un po 'usando i vari componenti di Bootstrap 4.</p><h2>Lavorare con la tipografia in Bootstrap 4</h2> Aggiungiamo una sezione sotto le nostre 3 colonne alla fine della chiusura</ div> per una classe di riga che avrà 2 colonne. <p>La prima colonna utilizzerà la maggior parte delle colonne (8) e la colonna di destra sarà per la navigazione verticale nella sezione successiva.</p><p> <div class="row mt-sm-4 mt-md-0"> <div class="col-sm-12 col-md-8"> <h3> Una voce importante</h3> <p class="lead">Una sorta di sottotitolo importante può andare qui, che è più grande e grigio.</p> <p>Lorem ipsum dolor sit amet, contectetur adipiscing elit, sed do eiusmod time incididunt ut labore et dolore magna aliqua. Questo è il minimo per veniam, quis nostrud esercizio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vellutata voluttà esse cillum dolore eu fugiat nulla pariatur.</p> <p>Questo è il minimo per veniam, quis nostrud esercizio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vellutata voluttà esse cillum dolore eu fugiat nulla pariatur.</p> </div> <div class="col-sm-12 col-md-4"> ... navigazione verticale a breve ..</div> </div> </p><p>Bootstrap 4 ha una sezione Tipografia nella sua documentazione che ti fornirà tutte le classi di supporto in base al tipo. È abbastanza semplice Noi usiamo <i>.piombo</i>enfatizzare i sottotitoli sotto il nostro elemento <i>h3</i>. </p><p>C'è anche una sezione chiamata "Utilità di testo" nella sua documentazione che fornisce opzioni per l'allineamento del testo, la conversione, il corsivo e i pesi dei caratteri.</p><p>Nelle finestre piccole, supponiamo di voler centrare il nostro tipo, non quello predefinito, che è allineato a sinistra.</p><p> <div class="col-sm-12 col-md-8 text-sm-center text-md-left"> </p><p>Ciò farà sì che il testo contenuto nel div sia centrato sulle finestre piccole e allineato a sinistra al centro e più grande.</p><h2>Bootstrap 4 Navigazione verticale</h2> Aggiungeremo un altro elemento prima di passare alla personalizzazione. Nella colonna di destra che abbiamo appena aggiunto, aggiungi la navigazione verticale: <p> <div class="col-sm-12 col-md-4"> <h3 class="mb-4"> Menu secondario</h3> <ul class="nav flex-column nav-pills"> <li class="nav-item"> Attivo< /li> <li class="nav-item"> collegamento</li> < li class="nav-item"> collegamento</li> < li class="nav-item"> Disabilitato</li> </ul> </div> </p><p>Il risultato nel browser dovrebbe apparire così:</p><p><img src='https://i1.wp.com/2.bp.blogspot.com/-pg59DxzNX6g/WspESLf8H0I/AAAAAAAAEV4/LpF-pGZtbL0IwKfhA1AkaqcRhGPkJC3uQCLcBGAs/s640/9-b4.jpg' width="100%" loading=lazy></p> <p>Puoi anche testarlo su piccoli viewport e notare che risponde molto bene. Esistono, ovviamente, molte più possibilità associate alla navigazione.</p><h2>Personalizzazione in Bootstrap 4</h2> Ora abbiamo un layout piuttosto standard che puoi trovare sulla maggior parte dei siti web. <p>Fortunatamente, Bootstrap 4 ha un sistema robusto che semplifica la personalizzazione di elementi semplici.</p><p>Apri il file /src/scss/styles.scss e incolla quanto segue:</p><p> // Sostituzioni variabili // Bootstrap Sass Imports @import "node_modules / bootstrap / scss / bootstrap";</p><p>Secondo la sezione Temi, puoi scegliere di includere tutti i file sass di Bootstrap 4 o aggiungere singoli elementi in base alle tue esigenze. Per rendere tutto semplice, importiamo semplicemente tutto come sopra.</p><h2>Cambia i colori del tema in Bootstrap 4</h2> Forse il problema più comune è lo scolorimento. <p>Se aprite il file node_modules / bootstrap / scss / _variables.scss, noterete che nella parte superiore menziona il sistema di colore. In questa sezione, vedrai tutte le variabili che puoi riscrivere per abbinare i colori.</p><p>Cambiamo solo il colore principale, cambiamo styles.scss nel modo seguente:</p><p> // La variabile esegue l'override di $ theme-colors: ("primary": # d95700);</p><p>Salvalo e questo è il risultato:</p><p><img src='https://i0.wp.com/1.bp.blogspot.com/-BcIkoch1Tlo/WspEksY7XOI/AAAAAAAAEWA/tROhJYHgFBkW5oea8Vd8XHfne4qyfbjSgCLcBGAs/s640/10-b4.jpg' width="100%" loading=lazy></p> <p>Molto semplice!</p><p>Cambiamo anche il colore di sfondo:</p><p> // La variabile esegue l'override di $ theme-colors: ("primary": # d95700); $ body-bg: #eded;</p><p>Ora il risultato è il seguente:</p><p><img src='https://i0.wp.com/3.bp.blogspot.com/-c-FHlOhk5dA/WspE0BgKdJI/AAAAAAAAEWE/V814KRHVZb4sC_XFKKMl8obsgepYarJdQCLcBGAs/s640/11-b4.jpg' width="100%" loading=lazy></p> <p>Hm, ora la nostra sezione jumbletron (eroe) sembra brutta in quanto era anche grigia.</p><p>Possiamo personalizzare le impostazioni per determinati elementi usando inspector in chrome o firefox, trovare le relative classi di elementi che vogliamo cambiare e cambiarle nel nostro file styles.scss.</p><p>In questo caso, la classe responsabile di jumbotron è <i>.jumbotron</i>. Cambiamo il colore di sfondo e aggiungiamo un piccolo bordo in alto per simulare l'ombretto dalla barra di navigazione:</p><p> // La variabile esegue l'override di $ theme-colors: ("primary": # d95700); $ body-bg: #eded; .jumbotron (background-color: #ffffff! important; border-top: 3px solid rgb (219, 219, 219);)</p><p>Ora il risultato:</p><p><img src='https://i2.wp.com/3.bp.blogspot.com/-ZMEyEovNEmI/WspFB0ireNI/AAAAAAAAEWI/FSm3Po3hPFwXhd3CbrnfTESfobiFXpm-gCLcBGAs/s640/12-b4.jpg' width="100%" loading=lazy></p> <h2>Conclusione</h2> Spero che questo corso / tutorial Bootstrap 4 ti sia piaciuto. Abbiamo appena toccato un po 'le basi e c'è ancora molto da imparare. A questo punto, tutto ciò che devi imparare dovrebbe essere semplice, dato che ora comprendi le basi e che quasi tutto è descritto nella documentazione. <p><img src='https://i0.wp.com/3.bp.blogspot.com/-Q0f3O0b9xlE/Vs8FJveN2EI/AAAAAAAAHlg/Zz4507IKMGs/s1600/Screenshot%2B%25281%2529.png' height="79" width="223" loading=lazy></p> <p><i>Un articolo in cui analizziamo la griglia Bootstrap 4, che viene utilizzata per creare layout di siti Web reattivi.</i></p> <h2>Scopo della griglia</h2> <p>La griglia del framework Bootstrap 4 è progettata per creare layout di siti Web reattivi.</p> <p>La mesh Bootstrap 4 si basa su CSS Flexbox e query multimediali CSS. Studiarli ti permetterà di capire più in dettaglio come funziona la griglia Bootstrap 4.</p> <p><b>Layout reattivo</b> - questo è un layout, il cui aspetto può variare a seconda della larghezza dell'area principale (finestra) del browser. Ciò significa che con alcune larghezze della finestra, un layout adattivo può apparire in un modo e con altri può apparire completamente diverso.</p> <p>In Bootstrap 4, le modifiche al layout vengono implementate tramite query multimediali. Ogni richiesta multimediale in Bootstrap si basa sulla larghezza minima della finestra del browser (punto di interruzione, punto di interruzione, nome del dispositivo).</p><br><img src='https://i1.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-4-five-grid-tiers.png' align="center" width="100%" loading=lazy><p>Il framework Bootstrap 4 ha 5 punti di controllo o nomi di dispositivi (senza designazione, sm, md, lg, xl) e, quindi, consente di creare un layout che può apparire diverso su ciascuno di essi.</p> <p>In Bootstrap 4, rispetto a Bootstrap 3, il numero di punti di interruzione è stato modificato. Ce n'erano quattro in Bootstrap 3: xs, sm, md e lg.</p> <h2>Elementi mesh</h2> <p>La griglia Bootstrap 4 è composta dai seguenti elementi:</p> <ul><li>Contenitori per imballaggio (container e container-fluido);</li> <li>Righe</li> <li>Adaptive Blocks (col).</li> </ul><h3>Contenitori per imballaggio</h3> <p>Un contenitore wrapper è un elemento griglia Bootstrap 4 da cui <b>inizia il layout reattivo</b> pagina o qualche blocco. Altri elementi della griglia (file e blocchi adattativi) devono essere posizionati al suo interno.</p><br><img src='https://i0.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-4-container.png' align="center" width="100%" loading=lazy><p>Bootstrap 4 ha 2 tipi di contenitori avvolgenti: adattivo-fisso e adattivo-gomma.</p> <p>Markup HTML del contenitore fisso adattivo:</p><p> <div class="container">...</div> </p><p>Markup HTML del contenitore di gomma adattivo:</p><p> <div class="container-fluid">...</div> </p><p><b>Il primo contenitore (adattivo-fisso)</b> utilizzato quando è necessario creare <b>layout con una larghezza che deve rimanere costante</b> entro una certa larghezza dalla finestra del browser.</p><br><img src='https://i1.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-4-width-container.png' align="center" width="100%" loading=lazy><p>La dipendenza della larghezza del contenitore fisso adattivamente dalla larghezza della finestra del browser è indicata nella tabella:</p> <p>Ciò significa che un contenitore fissato adattivamente avrà:</p> <ul><li>Larghezza 100% con larghezza viewport fino a 576px;</li> <li>540 px con una larghezza della finestra compresa tra 576 e 768 px;</li> <li>720 px con larghezze della finestra da 768 a 992 px, ecc.</li> </ul><p>In direzione orizzontale, il contenitore adattivo fisso è posizionato al centro, ciò avviene in bootstrap.css usando le proprietà CSS margin-left: auto e margin-right: auto.</p> <p>Il secondo contenitore (gomma adattiva) viene utilizzato quando è necessario creare un layout completamente flessibile di una pagina o di un blocco. Questo contenitore ha una larghezza del 100% a qualsiasi larghezza della finestra.</p><br><img src='https://i2.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-4-width-container-fluid.png' align="center" width="100%" loading=lazy><p>Inoltre, i contenitori di avvolgimento (contenitore e contenitore-fluido) hanno anche un'imbottitura a sinistra e a destra di 15 px. Il rientro dei contenitori di wrapping è impostato nel file CSS di Bootstrap 4 usando le proprietà padding-left: 15px e padding-right: 15px.</p> <p>Quando si crea un layout utilizzando la mesh Bootstrap 4, non posizionare un contenitore wrapper all'interno di un altro.</p> <h3>Ranks</h3> <p>Una riga è un elemento griglia speciale (riga) che viene utilizzato durante la creazione di un layout nei seguenti casi:</p> <ul><li>tra il contenitore e i blocchi adattivi che devono essere inseriti in esso;</li> <li>tra l'uno e l'altro blocco adattivo da posizionare nel primo blocco adattivo.</li> </ul><br><img src='https://i2.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-4-row.png' align="center" width="100%" loading=lazy><p>Markup di riga HTML:</p><p> <div class="row">...</div> </p><p>A differenza di Bootstrap 3, in cui la serie ha agito solo per compensare i campi di imbottitura interna sinistra e destra di contenitori avvolgenti o blocchi adattivi, in Bootstrap 4 <b>gioca un ruolo molto importante</b>. Ciò è dovuto al fatto che questa griglia è costruita su CSS Flexbox. In questa griglia, agisce come <b>contenitore flessibile</b> per elementi flessibili (blocchi adattivi). Coloro. se si utilizzano blocchi adattivi all'esterno della riga, non funzioneranno. NEL <b>Bootstrap 4 blocchi adattivi devono essere</b> essere in un blocco con una riga di classe.</p><p>La compensazione dei campi di riempimento interni viene eseguita come in Bootstrap 3, a causa di margini esterni sinistro e destro negativi pari a 15px (margine sinistro: -15px e margine destro: -15px).</p> <p>Un esempio di come vengono compensati i campi di riempimento:</p><p>  contenitore (+ 15px) -\u003e riga (-15px) -\u003e col (+ 15px) -\u003e contenuto contenitore-fluido (+ 15px) -\u003e riga (-15px) -\u003e col (+ 15px) -\u003e riga (-15px) -\u003e col (+ 15px) -\u003e contenuto</p><p>Di conseguenza, il rientro dai bordi sinistro e destro del contenitore wrapper al contenuto sarà sempre 15px.</p> <p>Inoltre, i blocchi adattativi che non sono logicamente interconnessi non devono essere posizionati nella stessa riga come parte di un contenitore avvolgente o di un altro blocco adattivo. È più corretto dividerli in gruppi logici separati e posizionarli ciascuno in una riga separata.</p> <p>Per esempio:</p><p> <div class="container">  <div class="row"> <div class="col-6">...</div> <div class="col-6">  <div class="row">…</div> <div class="row">…</div> <div class="row">…</div> </div> <div class="row">...</div> </div> </p><h3>Blocchi adattivi</h3> <p>I blocchi adattivi sono i principali elementi costruttivi di un layout adattivo, dipenderà da loro come apparirà il layout di una pagina Web in diversi punti di controllo (senza designazione, sm, md, lg e xl).</p><br><img src='https://i1.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-4-col.png' align="center" width="100%" loading=lazy><p><b>La creazione di un blocco adattivo è molto semplice:</b> aggiungendo una o più classi col -? -? all'elemento HTML richiesto.</p> <p>In classe <b>invece del primo punto interrogativo, viene indicato il nome del punto di controllo</b>: senza designazione, sm, md, lg o xl. Anziché <b>il secondo punto interrogativo indica la larghezza del blocco adattivo</b>che deve avere nel punto di controllo indicato. La larghezza del blocco adattivo viene impostata in forma relativa utilizzando un numero compreso tra 1 e 12 (colonne Bootstrap).</p> <p>Questo numero determina la parte della larghezza che il blocco adattivo occuperà nel punto di controllo specificato dalla larghezza del blocco genitore, ad es. riga. La larghezza della riga in termini numerici (colonne Bootstrap) è 12.</p> <p>Ad esempio, un blocco con classe col-md-4 al checkpoint md occuperà 4/12 della larghezza della riga, ad es. 33,3% (ovvero 4/12 * 100% \u003d 33,3%).</p> <p>I blocchi adattivi, come i contenitori, hanno un rientro di 15 px a destra e a sinistra. Questi padding per blocchi adattivi del framework Bootstrap 4 sono impostati con <a href="https://qipu.ru/it/tele2/gde-vkontakte-rasskazat-druzyam-kak-sdelat-klassnuyu-sistemu.html">usando CSS</a> imbottitura-sinistra: 15px e imbottitura-destra: 15px.</p> <p>I blocchi adattivi devono essere posizionati in una riga. Coloro. qualsiasi blocco adattivo come genitore deve avere un blocco con riga di classe.</p> <p>Ad esempio, considera la larghezza su ciascun dispositivo che avrà il seguente blocco adattivo:</p><p> <div class="row">  <div class="col-12 col-sm-9 col-md-7 col-lg-5 col-xl-3"> ... </div> </div> </p><p>Questo blocco adattivo avrà:</p> <ul><li>fino a sm (su xs) una larghezza pari a 12 colonne Bootstrap (ovvero 12/12 * 100% \u003d 100% della larghezza della riga);</li> <li>sul dispositivo sm, una larghezza pari a 9 colonne Bootstrap (ovvero 9/12 * 100% \u003d 75% della larghezza della riga);</li> <li>sul dispositivo md, una larghezza pari a 7 colonne Bootstrap (ovvero 7/12 * 100% \u003d 58,3% della larghezza della riga);</li> <li>su un dispositivo LG, una larghezza pari a 5 colonne Bootstrap (ovvero 5/12 * 100% \u003d 41,6% della larghezza della riga);</li> <li>su un dispositivo xl, una larghezza pari a 3 colonne Bootstrap (ovvero 3/12 * 100% \u003d 25% della larghezza della riga).</li> </ul><p>Oltretutto <b>quando si specifica la larghezza dell'unità adattiva</b> per qualche tipo di pietra miliare, si diffonderà <b>non solo a questo punto, ma a tutto quanto segue</b>se non sono impostati.</p> <ol><li>Blocco adattivo <div class="col-12 col-sm-6 col-xl-3"> sui dispositivi md e lg avrà una larghezza pari a 6 colonne Bootstrap: <b>(12) -\u003e sm (6) -\u003e md -\u003e log -\u003e xl (3)</b>.</li> <li>Blocco adattivo <div class="col-8 col-md-4"> sul dispositivo sm avrà una larghezza pari a 8 colonne Bootstrap e sui dispositivi lg e xl - la larghezza pari a 4 colonne Bootstrap: <b>(8) -\u003e sm -\u003e md (4) -\u003e lg -\u003e xl</b>.</li> <li>Blocco adattivo <div class="col-6"> su tutti i dispositivi avrà una larghezza pari a 6 colonne Bootstrap: <b>(6) -\u003e sm -\u003e md -\u003e lg -\u003e xl</b>.</li> </ol><h3>Blocchi adattivi senza altoparlanti</h3> <p>Classi speciali col, col-sm, col-md, col-lg, col-xl, col-auto, col-sm-auto, col-md-auto, col-lg-auto e col-xl vengono aggiunti alla griglia Bootstrap 4 -auto.</p> <p>Il primo gruppo di classi (col, col-sm, col-md, col-lg, col-xl) è progettato per creare blocchi adattivi la cui larghezza dipenderà dallo spazio libero della linea. La distribuzione della larghezza non occupata (spazio libero) della linea tra tutti questi blocchi viene eseguita in modo uniforme. Inoltre, questi blocchi adattivi prima della distribuzione dello spazio di linea libero (per impostazione predefinita) hanno una larghezza zero.</p> <p>Diamo un'occhiata ad alcuni esempi.</p> <p>1. Creare in una fila di 5 blocchi adattivi con la stessa larghezza.</p><p> <div class="row"> <div class="col"> 1/5 </div> <div class="col"> 2/5 </div> <div class="col"> 3/5 </div> <div class="col"> 4/5 </div> <div class="col"> 5/5 </div> </div> </p><p>Calcolo della larghezza:</p> <ul><li>spazio libero della linea - 100% (perché la loro larghezza è 0);</li> <li>la larghezza di ciascun blocco adattivo è del 20% (100% / 5);</li> </ul><p>2. Larghezza dei blocchi con classe col se è presente un blocco adattivo con il numero di colonne nella linea.</p><p> <div class="row"> <div class="col"> ? </div> <div class="col-7"> 7 colonne</div> <div class="col"> ? </div> <div class="col"> ? </div> </div> </p><p>Calcolo della larghezza:</p> <ul><li>spazio libero della linea - 41,67% ((12-7) / 12 * 100%);</li> <li>la larghezza di ciascun blocco adattivo tranne col-7 è del 13,89% (41,67% / 3).</li> </ul><p>In alcune versioni dei browser Safari, si verifica un errore durante l'utilizzo di tale markup, che può essere suddiviso in più righe.</p> <p>Esistono 2 modi per risolvere questo problema:</p> <ul><li>impostando i blocchi adattivi del bordo. col (bordo: 1px solido trasparente;)</li> <li>impostando blocchi adattivi la proprietà CSS flex-base .col (flex: 1 0 20%;)</li> </ul><p>Inoltre, la griglia Bootstrap 4 consente di disporre blocchi adattivi senza specificare il numero di colonne su più righe.</p><p> <div class="row"> <div class="col"> ... </div> <div class="col"> ... </div> <div class="w-100"></div> <div class="col"> ... </div> <div class="col"> ... </div> </div> </p><p>Questa azione viene eseguita aggiungendo al markup di fronte al blocco adattivo, che dovrebbe iniziare con una nuova linea, un elemento div vuoto con classe w-100.</p> <p>Se questa azione deve essere utilizzata solo per alcuni punti di controllo, oltre ad essa (classe w-100), è necessario aggiungere anche le classi Bootstrap 4 rispondenti al servizio.</p> <p>In questo esempio, i blocchi adattativi verranno trasferiti su una nuova linea solo su dispositivi con una finestra piccola o piccola.</p><p> <div class="row"> <div class="col"> ... </div> <div class="col"> ... </div> <div class="d-block d-md-none w-100"></div> <div class="col"> ... </div> <div class="col"> ... </div> </div> </p><p>Il secondo gruppo di classi (col-auto, col-sm-auto, col-md-auto, col-lg-auto e col-xl-auto) è progettato per creare blocchi adattivi la cui larghezza sarà determinata in base al loro contenuto.</p> <p>Per esempio:</p><p> <div class="row"> <div class="col"> (1) </div> <div class="col-md-auto"> (2) - la larghezza nei punti di controllo md, lg e xl sarà determinata in base al contenuto</div> <div class="col col-lg-2"> (3) </div> </div> </p><p>Di conseguenza:</p> <ul><li>su xs e sm i blocchi adattativi saranno posizionati verticalmente (uno sotto l'altro) e occuperanno l'intera larghezza della riga;</li> <li>su md, il blocco adattivo 2 avrà la larghezza necessaria per visualizzare il suo contenuto; se il blocco 2 non occupa l'intera larghezza della riga, i blocchi adattivi 1 e 3 lo divideranno equamente; se il blocco 2 occupa l'intera larghezza della linea, l'immagine sarà la stessa dei punti di controllo xs e sm;</li> <li>su lg e xl il blocco adattivo 2 avrà la larghezza necessaria per visualizzare il suo contenuto; se il blocco 2 non occupa l'intera larghezza della riga, il blocco 3 occuperà una larghezza pari a 2 colonne di Bootstrap e il blocco 1 occuperà l'intera larghezza rimanente della riga; se il blocco 2 occupa l'intera larghezza della riga, il markup sarà lo stesso di xs e sm, solo 3 blocchi su 3 righe avranno una larghezza pari a 2 colonne Bootstrap.</li> </ul><h2>Disposizione dei blocchi adattivi di fila</h2> <p>I blocchi adattivi di fila sono linee orizzontali predefinite. All'interno della linea orizzontale, i blocchi adattivi si allineano in sequenza da sinistra a destra. I blocchi adattivi con un numero totale di colonne non superiore a 12 possono adattarsi a una linea orizzontale, mentre i blocchi adattivi che non rientrano nella linea corrente passano alla successiva.</p><br><img src='https://i0.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-4-column-wrapping.png' align="center" width="100%" loading=lazy> <div class="container"> <div class="row"> <div class="col-6"> (1) </div> <div class="col-6"> (2) </div> <div class="col-12"> (3) </div> <div class="col-8"> (4) </div> </div> </div> <p>Considera un altro esempio in cui i blocchi adattivi hanno larghezze diverse in punti di controllo diversi:</p><p> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div> </div> </p><h2>Il principio di base del layout</h2> <p>Il principio di base del layout di una pagina Web sulla griglia Bootstrap 4 è quello di incorporare alcuni blocchi adattivi in \u200b\u200baltri.</p> <p>Inoltre, la larghezza dei blocchi adattativi è sempre un valore relativo, che è impostato nelle colonne Bootstrap e dipende solo dalla larghezza del genitore, ad es. riga.</p> <p>Il contenuto della pagina Web deve essere inserito solo nei blocchi adattivi.</p> <p>Ad esempio, nel layout esistente, ovvero nel blocco adattivo col-8, allegheremo altri 2 blocchi:</p><p> <div class="container"> <div class="row"> <div class=col-8>...</div> <div class=col-4>...</div> </div> </div> </p><p>Per questo, è prima necessario inserire una riga nel blocco col-8 (contenitore per blocchi adattivi):</p><p> <div class="container"> <div class="row"> <div class=col-8> <div class="row">...</div> <div class=col-4>...</div> </div> </div> Bootstrap 4: inserire una riga nel contenuto del blocco adattivo col-8 <br><img src='https://i1.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-add-row-in-col.png' align="center" width="100%" loading=lazy></p><p>Successivamente, aggiungi 2 blocchi adattivi di seguito:</p><p> <div class="container"> <div class="row"> <div class=col-8> <div class="row"> <div class=col-6>...</div> <div class=col-6>...</div> </div> <div class=col-4>...</div> </div> </div> Bootstrap 4: inserire blocchi adattivi in \u200b\u200buna riga <br><img src='https://i1.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-add-cols-in-row.png' align="center" width="100%" loading=lazy></p><h2>Allineamento adattivo del blocco</h2> <p>L'allineamento orizzontale e verticale dei blocchi adattivi viene eseguito in Bootstrap 4 utilizzando le classi di utilità flex.</p> <h3>Allineamento verticale di blocchi adattivi</h3> <p>L'allineamento dei blocchi adattivi all'interno di una linea di riga in verticale viene effettuato mediante una delle seguenti classi, che devono essere aggiunte in aggiunta alla riga:</p> <ul><li>align-items-start (rispetto all'inizio della riga);</li> <li>align-items-center (centro);</li> <li>align-items-end (rispetto alla fine).</li> </ul><p>Ad esempio, allineamo tutti i blocchi adattivi al centro della linea di riga:</p><p> <div class="row align-items-center"> <div class="col"> 1/2 </div> <div class="col"> 2/2 </div> </div> </p><p>Per impostazione predefinita, gli elementi adattivi occupano l'intera altezza della linea della riga in cui si trovano.</p> <p>L'allineamento verticale di uno specifico blocco adattivo all'interno della linea può essere effettuato da una delle seguenti classi:</p> <ul><li>align-self-start (relativo all'inizio della linea);</li> <li>align-self-center (center);</li> <li>align-self-end (rispetto alla fine).</li> </ul><p>Queste classi devono essere aggiunte ai blocchi adattativi, ma non a una riga.</p> <p>Ad esempio, allineare il blocco adattivo 2 lungo il bordo inferiore della linea:</p><p> <div class="row align-items-center"> <div class="col"> (1) </div> <div class="col align-self-end"> (2) </div> </div> </p><h3>Allineamento orizzontale di blocchi adattivi</h3> <p>Le seguenti classi sono progettate per allineare i blocchi adattativi in \u200b\u200bdirezione orizzontale:</p> <ul><li>justify-content-start (relativamente all'inizio della riga di riga - per impostazione predefinita);</li> <li>justify-content-center (center);</li> <li>giustificare-fine-contenuto (rispetto alla fine della riga);</li> <li>justify-content-around (uniformemente, tenendo conto dello spazio davanti al primo e all'ultimo blocco adattivo);</li> <li>justify-content-between (uniformemente, con lo stesso spazio tra i blocchi adattativi).</li> </ul><p>Ad esempio, distribuiamo i blocchi adattivi in \u200b\u200bdirezione orizzontale in modo uniforme:</p><p> <div class="row justify-content-around"> <div class="col-4"> (1) </div> <div class="col-4"> (2) </div> </div> </p><h2>Layout adattivo senza bordi</h2> <p>L'imbottitura interna dei blocchi adattivi e il margine negativo esterno della serie possono essere rimossi aggiungendo la classe no-gutter all'ultima (cioè riga).</p><p> <div class="row no-gutters"> <div class="col-6">  <div class="row"> <div class=col-8>...</div> <div class=col-4>...</div> </div> </div> <div class="col-6">...</div> </div> </p><p>Si noti che questa classe (senza grondaie) riguarda solo i blocchi adattativi che sono direttamente posizionati in questa riga. Coloro. sui blocchi adattivi che non hanno questa serie come genitore, le proprietà CSS per la rimozione del riempimento non verranno applicate.</p> <p>In Bootstrap 4, puoi compensare i blocchi adattivi con:</p> <ul><li>classi di offset (per un certo numero di colonne);</li> <li>classi di margine di servizio (utilità).</li> </ul><h3>Classi di offset</h3> <p>Le classi di offset sono progettate per spostare i blocchi adattivi a destra di un certo numero di colonne.</p> <p>Queste classi hanno la seguente sintassi:</p><p>Offset- (1) o offset- (breakpoint) - (1)</p><p>(punto di interruzione) - un punto di controllo dal quale verrà applicato un offset a questo blocco (se non è specificato, l'offset verrà applicato a partire dai dispositivi più piccoli).</p> <p>(2) è il valore di offset indicato dal numero di colonne Bootstrap.</p> <p>Ad esempio, imposteremo l'offset su blocchi adattivi, come mostrato nella figura.</p> <br><img src='https://i2.wp.com/itchief.ru/assets/img/bootstrap/bootstrap-4-grid-offset.png' width="100%" loading=lazy><p> <div class="row"> <div class="col-4"> (1) </div> <div class="col-4 offset-4"> (2) </div> </div> <div class="row"> <div class="col-3 offset-3"> (1) </div> <div class="col-3 offset-3"> (2) </div> </div> <div class="row"> <div class="col-6 offset-3"> (1) </div> </div></p> <h3>Offset utilizzando le classi di margine</h3> <p>Nella quarta versione di Bootstrap, puoi anche impostare l'offset su blocchi adattivi usando l'indentazione del margine (margine-sinistra: auto e (o) margine-destra: auto). Questa opzione di offset è nata perché la mesh nella nuova versione Bootstrap (4) si basa su CSS Flexbox.</p> <p>Questa opzione di offset (utilizzando le classi di margine) viene utilizzata quando <span>i blocchi devono essere spostati l'uno rispetto all'altro di una determinata variabile</span>.</p> <p>In Bootstrap 4, per un'assegnazione più conveniente e adattiva dei margini ai margini (margine-sinistra: auto e (o) margine-destra: auto), puoi usare le classi ml-auto, mr-auto, ml- (breakpoint) -auto e mr- ( punto di interruzione) -auto.</p><p>Bootstrap 4 - Offset adattivo del blocco <br><img src='https://i0.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-4-offsetting-columns.png' align="center" width="100%" loading=lazy></p><p> <div class="row"> <div class="col-4"> (1) </div> <div class="col-4 ml-auto"> (2) </div> </div> <div class="row"> <div class="col-3"> (1) </div> <div class="col-3 ml-auto mr-auto"> (2) </div> <div class="col-3"> (3)</div> </div> <div class="row"> <div class="col-4 ml-auto mr-auto"> (1) </div> <div class="col-4 ml-auto mr-auto"> (2) </div> </div></p> <h2>Cambia l'ordine visivo dei blocchi adattivi</h2> <p>Per impostazione predefinita blocchi adattivi <span>visualizzato visivamente</span> nell'ordine in cui si trovano nel codice HTML.</p> <p>La modifica dell'ordine visivo di un blocco adattivo in Bootstrap 4 avviene tramite la classe order- (visual_number). Questa classe è per il punto di interruzione xs. Se l'ordine degli elementi deve essere determinato non per il punto di controllo xs, ma per sm, md, lg o xl, viene utilizzata la seguente versione di questa classe:</p><p>Ordine- (punto di interruzione) - (numero_visivo)</p><p>Invece di (visual_number), è necessario specificare un numero compreso tra 1 e 12.</p> <p>Questo numero determina come gli elementi seguiranno visivamente sulla pagina. Vale a dire, tutti gli elementi adattivi seguiranno visivamente in ordine crescente di questi numeri. Se la classe ordine non è impostata per l'elemento, per impostazione predefinita è 0.</p> <p>Ad esempio, modificare l'ordine di due blocchi adattivi:</p> <p> <div class="row"> <div class="col"> Il primo (non ordinato, senza classe ordine) </div> <div class="col order-12"> Secondo, ma verrà visualizzato per ultimo</div> <div class="col order-1"> Terzo, ma verrà visualizzato secondo</div> </div></p> <p>Un altro esempio (utilizzando le classi di ordine adattivo):</p> <p> <div class="row"> <div class="col-md-8 order-2 order-md-1"> Il primo (su xs, sm verrà visualizzato secondo)</div> <div class="col-md-4 order-1 order-md-2"> Secondo (su xs, prima verrà visualizzato sm)</div> </div></p> <p>Oltre ai numeri (per impostazione predefinita, da 1 a 12), puoi anche usare le parole prima e ultima. Queste classi (order-first, order- (breakpoint) -first, order-last, order- (breakpoint) -last) consentono di spostare visivamente l'elemento all'inizio o alla fine.</p> <p>Le classi order-first e order- (breakpoint)-first esercitano il loro effetto impostando l'elemento CSS sulla proprietà order con un valore di -1 (order: -1) e le classi order-last e order- (breakpoint) -last del CSS della proprietà order con valore 13 (ordine: $ colonne + 1).</p> <p>Riscriviamo l'esempio sopra usando le classi d'ordine che usano <a href="https://qipu.ru/it/bilajjn/parser-klyuchevyh-slov-slovo-b-kak-nastroit-i-polzovatsya-programmoi.html">parole chiave</a> primo e ultimo:</p> <p> <div class="row"> <div class="col-md-8 order-last order-md-first"> Primo (su xs, sm verrà visualizzato per ultimo)</div> <div class="col-md-4 order-first order-md-last"> Ultimo (su xs, prima verrà visualizzato sm)</div> </div></p> <p>Un esempio che utilizza le classi di ordine con un numero e le parole prima e ultima:</p> <p> <div class="row"> <div class="col-3 order-sm-last order-md-1"># 1 (XS), #LAST (SM), # 1 (MD, LG e XL)</div> <div class="col-3 order-md-7"># 2 (XS), # 7 (MD, LG e XL)</div> <div class="col-3 order-md-6"># 3 (XS), # 6 (MD, LG e XL)</div> <div class="col-3 order-md-5"># 4 (XS), # 5 (MD, LG e XL)</div> <div class="col-3 order-md-4"># 5 (XS), # 4 (MD, LG e XL)</div> <div class="col-3 order-md-3"># 6 (XS), # 3 (MD, LG e XL)</div> <div class="col-3 order-md-2"># 7 (XS), # 2 (MD, LG e XL)</div> <div class="col-3 order-sm-first order-md-8"># 8 (XS), #FIRST (SM), # 8 (MD, LG e XL)</div> </div></p> <h2>Esempio di layout adattivo su una griglia Boostrap 4</h2> <p>Creare un layout adattivo del blocco di pagine Web mostrato nella figura utilizzando la griglia Bootstrap 4. Bootstrap 4 - Esempio di layout adattivo del blocco <br><img src='https://i0.wp.com/itchief.ru/assets/images/bootstrap/bootstrap-4-adaptive-layout-block.png' align="center" width="100%" loading=lazy></p><p>1. Creare un layout a blocchi per dispositivi mobili (xs).</p><p> <div class="row"> <div class="col-12"> (1) </div> <div class="col-12"> (2) </div> <div class="col-12"> (3) </div> <div class="col-12"> (4) </div> <div class="col-12"> (5) </div> </div> </p><p>2. Imposta il markup per sm:</p><p> <div class="row"> <div class="col-12 col-sm-6"> (1) </div> <div class="col-12 col-sm-6"> (2) </div> <div class="col-12 col-sm-6"> (3) </div> <div class="col-12 col-sm-6"> (4) </div> <div class="col-12 col-sm-12"> (5) </div> </div> </p><p>3. Imposta il numero di colonne per i blocchi che dovrebbero avere sui dispositivi md e lg:</p><p> <div class="row"> <div class="col-12 col-sm-6 col-md-4"> (1) </div> <div class="col-12 col-sm-6 col-md-4"> (2) </div> <div class="col-12 col-sm-6 col-md-4"> (3) </div> <div class="col-12 col-sm-6 col-md-6"> (4) </div> <div class="col-12 col-sm-12 col-md-6"> (5) </div> </div> </p><p>4. Crea markup per xl:</p><p> <div class="row"> <div class="col-12 col-sm-6 col-md-4 col-xl"> (1) </div> <div class="col-12 col-sm-6 col-md-4 col-xl"> (2) </div> <div class="col-12 col-sm-6 col-md-4 col-xl"> (3) </div> <div class="col-12 col-sm-6 col-md-6 col-xl"> (4) </div> <div class="col-12 col-sm-12 col-md-6 col-xl"> (5) </div> </div> </p><p>Rimuoviamo i punti di controllo non necessari dai blocchi adattivi:</p><p> <div class="row"> <div class="col-12 col-sm-6 col-md-4 col-xl"> (1) </div> <div class="col-12 col-sm-6 col-md-4 col-xl"> (2) </div> <div class="col-12 col-sm-6 col-md-4 col-xl"> (3) </div> <div class="col-12 col-sm-6 col-xl"> (4) </div> <div class="col-sm-12 col-md-6 col-xl"> (5) </div> </div> </p><p>Inoltre, inizialmente in Bootstrap 4, il blocco adattivo ha una larghezza del 100%. Ciò consente di non specificare il numero di colonne durante la creazione di blocchi adattivi se la loro larghezza iniziale deve essere di 12 colonne (100%).</p><p> <div class="row"> <div class="col-sm-6 col-md-4 col-xl"> (1) </div> <div class="col-sm-6 col-md-4 col-xl"> (2) </div> <div class="col-sm-6 col-md-4 col-xl"> (3) </div> <div class="col-sm-6 col-xl"> (4) </div> <div class="col-md-6 col-xl"> (5) </div> </div></p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="bsb-wrap bsb-bold bsb-after-post php-mode" data-post-id="4848" data-share-url="/eshhe-odin-nalog-chem-zamenit-nalog-na-modernizatsiyu/"> <div class="bsb-items"> <div class="bsb-item bsb-facebook bsb-no-count" data-id="facebook"> <a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fqipu.ru%2Fit%2Ftele2%2Ftemy-dlya-bootstrap-4.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-facebook"></i> <span class="bsb-label">Condividere</span> </a> </div> <div class="bsb-item bsb-telegram bsb-no-count" data-id="telegram"> <a href="https://qipu.ru/it/tg://msg?text=https%3A%2F%2Fqipu.ru%2Ftele2%2Ftemy-dlya-bootstrap-4.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-telegram"></i> <span class="bsb-label">Condividere</span> </a> </div> <div class="bsb-item bsb-twitter bsb-no-count" data-id="twitter"> <a href="https://twitter.com/share?url=https%3A%2F%2Fqipu.ru%2Fit%2Ftele2%2Ftemy-dlya-bootstrap-4.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-twitter"></i> <span class="bsb-label">Tweet</span> </a> </div> <div class="bsb-item bsb-vkontakte bsb-no-count" data-id="vkontakte"> <a href="https://vk.com/share.php?url=https%3A%2F%2Fqipu.ru%2Ftele2%2Ftemy-dlya-bootstrap-4.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-vkontakte"></i> <span class="bsb-label">Piace</span> </a> </div> <div class="bsb-item bsb-fb-messenger bsb-no-count" data-id="fb-messenger"> <a href="https://qipu.ru/it/fb-messenger://share/?link=https%3A%2F%2Fqipu.ru%2Ftele2%2Ftemy-dlya-bootstrap-4.html" class="bsb-link" target="_blank" data-wpel-link="internal"> <i class="bsb-icon icon icon-fb-messenger"></i> <span class="bsb-label">Piace</span> </a> </div> </div> </div> </div> </div> </article> <section class="section-carousel"> <div class="post-carousel"> <h3 class="title-block">Leggi anche</h3> <div class="owl-container owl-loop" data-columns="3" data-padding="20"> <div class="owl-carousel"> <article class="post- post type-post status-publish format-standard has-post-thumbnail hentry category-morning-news"> <div class="post-thumbnail"> <img width="720" height="378" src="/uploads/aad66ab5d4309767f10f97a2494cc285.jpg" class="attachment-md size-md wp-post-image" alt="L'unità non legge i dischi?" / loading=lazy> <div class="post-more"><a href="https://qipu.ru/it/bilajjn/dvd-ne-chitaetsya-diskovod-ne-chitaet-diski-reshenie-est-obzor-zhestkogo-diska.html" class="btn-link" data-wpel-link="internal"><span>Leggere</span></a></div> <ul class="post-meta"></ul> <a href="https://qipu.ru/it/bilajjn/dvd-ne-chitaetsya-diskovod-ne-chitaet-diski-reshenie-est-obzor-zhestkogo-diska.html" data-wpel-link="internal"></a> </div> <h2 class="entry-title"><a href="https://qipu.ru/it/bilajjn/dvd-ne-chitaetsya-diskovod-ne-chitaet-diski-reshenie-est-obzor-zhestkogo-diska.html" data-wpel-link="internal">L'unità non legge i dischi?</a></h2> <ul class="post-meta"> <li class="meta-date"> <time class="entry-date published updated" datetime=""> 04.07.2020 </time> </li> </ul> </article>  <article class="post- post type-post status-publish format-standard has-post-thumbnail hentry category-morning-news"> <div class="post-thumbnail"> <img width="720" height="378" src="/uploads/cbfe33c18b199bff987a1e53be287f4d.jpg" class="attachment-md size-md wp-post-image" alt="Il computer non accetta unità" / loading=lazy> <div class="post-more"><a href="https://qipu.ru/it/mts/diskovod-ne-chitaet-novye-diski-kompyuter-ne-prinimaet-diski-dvd-rom-ne.html" class="btn-link" data-wpel-link="internal"><span>Leggere</span></a></div> <ul class="post-meta"></ul> <a href="https://qipu.ru/it/mts/diskovod-ne-chitaet-novye-diski-kompyuter-ne-prinimaet-diski-dvd-rom-ne.html" data-wpel-link="internal"></a> </div> <h2 class="entry-title"><a href="https://qipu.ru/it/mts/diskovod-ne-chitaet-novye-diski-kompyuter-ne-prinimaet-diski-dvd-rom-ne.html" data-wpel-link="internal">Il computer non accetta unità</a></h2> <ul class="post-meta"> <li class="meta-date"> <time class="entry-date published updated" datetime=""> 04.07.2020 </time> </li> </ul> </article>  <article class="post- post type-post status-publish format-standard has-post-thumbnail hentry category-morning-news"> <div class="post-thumbnail"> <img width="720" height="378" src="/uploads/27377e32a73beb21adad13c12523888b.jpg" class="attachment-md size-md wp-post-image" alt="Cosa è il prefetch in Windows 7" / loading=lazy> <div class="post-more"><a href="https://qipu.ru/it/mobilnye-sovety/chto-takoe-prefetch-v-windows-7-prefetch-chto-za-papka.html" class="btn-link" data-wpel-link="internal"><span>Leggere</span></a></div> <ul class="post-meta"></ul> <a href="https://qipu.ru/it/mobilnye-sovety/chto-takoe-prefetch-v-windows-7-prefetch-chto-za-papka.html" data-wpel-link="internal"></a> </div> <h2 class="entry-title"><a href="https://qipu.ru/it/mobilnye-sovety/chto-takoe-prefetch-v-windows-7-prefetch-chto-za-papka.html" data-wpel-link="internal">Cosa è il prefetch in Windows 7</a></h2> <ul class="post-meta"> <li class="meta-date"> <time class="entry-date published updated" datetime=""> 04.07.2020 </time> </li> </ul> </article>  </div> <div class="owl-dots"></div> </div> </div> </section> </main> </div> </div> </div> </div> <footer class="site-footer"> <style> .footer-section { width: 830px; margin: 0 auto; padding: 0; font-family: 'Noto Sans', sans-serif; } .site-footer { background-color: #222; } @media (max-width: 1025px) { .footer-section { max-width: 690px; } } @media (max-width: 760px) { .footer-section { width: 90%; } } .site-footer a:hover { color: #FF3400; } .white-a { color: #969696!important; } .white-a:hover { color: #fff!important; } .white-a:hover g { opacity: 1; } </style> <div class="footer-section"> <div class="footer" > <div class="footer__menu"> <div class="footer__menu__logo" style="background:none;"><img src="/logo.png" loading=lazy></div> <ul> <li><a href="https://qipu.ru/it/category/bilajjn/">linea retta</a></li> <li><a href="https://qipu.ru/it/category/megafon/">Megafono</a></li> <li><a href="https://qipu.ru/it/category/mobilnye-sovety/">Suggerimenti per dispositivi mobili</a></li> <li><a href="https://qipu.ru/it/category/mts/">mts</a></li> </ul> <ul> <li><a href="https://qipu.ru/it/category/tele2/">TELE 2</a></li> <li><a href="https://qipu.ru/it/category/yota/">Yota</a></li> <li><a href="https://qipu.ru/it/category/bilajjn/">linea retta</a></li> <li><a href="https://qipu.ru/it/category/megafon/">Megafono</a></li> </ul> </div> <div class="footer__social"> <a href="https://facebook.com/" target="_blank" class="footer__social--facebook white-a" data-wpel-link="external"></a> <a href="https://twitter.com/" target="_blank" class="footer__social--tw white-a" data-wpel-link="external"></a> <a href="" target="_blank" class="footer__social--vk white-a" data-wpel-link="external"></a> <a href="https://youtube.com/" target="_blank" class="footer__social--yt white-a" data-wpel-link="external"></a> </div> <div class="footer__info" > <p>© qipu.ru, 2020. Assistente personale nel mondo delle comunicazioni mobili <br> .</p> </div> </div> </div> </footer> </div> </div> <a href="https://qipu.ru/it/#top" class="scroll-to-top hidden-sm-down" data-wpel-link="internal"></a> <div class="site-search" id="search"> <button type="button" class="close"></button> <div class="form-container"> <div class="container"> <div class="row"> <div class="col-lg-6 offset-lg-3"> <form role="search" method="get" class="search-form form" action="/"> <label class="sr-only">Cercare:</label> <div class="input-group"> <input type="search" value="" name="s" class="search-field form-control" placeholder="Che cosa sta cercando?" required> <span class="input-group-btn"> <button type="submit" class="search-submit btn btn-primary btn-effect"><span>Ricerca</span><span><i class="icon icon-search"></i></span></button> </span> </div> </form> <p>Inserisci le parole chiave.</p> </div> </div> </div> </div> </div> <style type="text/css"> .wpmchimpa-overlay-bg.wpmchimpselector { display: none; top: 0; left: 0; height:100%; width: 100%; cursor: pointer; z-index: 999999; background: #000; background: rgba(0,0,0,0.40); background:rgba(0,0,0,0.7);cursor: default; position: fixed!important; } .wpmchimpa-overlay-bg #wpmchimpa-main *{ transition: all 0.5s ease; } .wpmchimpa-overlay-bg .wpmchimpa-mainc, .wpmchimpa-overlay-bg .wpmchimpa-maina{ -webkit-transform: translate(0,0); height:100%;} .wpmchimpa-overlay-bg #wpmchimpa-main { position: absolute; top: 50%; left: 50%; border-radius: 2px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% - 20px); max-width:650px; background: #27313B; text-align: center; background-color:#ffffff;} #wpmchimpa-main #wpmchimpa-newsletterform{ } #wpmchimpa-main #wpmchimpa{ width: calc(100% - 20px); max-width: 400px; margin: 0 auto; } #wpmchimpa div{ position:relative; } #wpmchimpa h3{ line-height: 24px; margin-top:20px; color: #F4233C; font-size: 24px; font-family:Tahoma, Geneva, sans-serif;font-size:35px;line-height:35px;font-weight:normal;font-style:normal;color:#f34b38;} #wpmchimpa .wpmchimpa_para{ margin-top: 15px; } #wpmchimpa .wpmchimpa_para,#wpmchimpa .wpmchimpa_para * { font-size: 15px; color: #959595; font-family:Tahoma, Geneva, sans-serif;font-size:15px;} #wpmchimpa form{ margin: 20px auto; } #wpmchimpa .formbox > div:first-of-type{ width: 65%; float: left; } #wpmchimpa .formbox > div:first-of-type + div{ width: 35%; float: left; text-align: center; } #wpmchimpa .formbox input[type="text"]{ border-radius: 3px 0 0 3px; } #wpmchimpa .wpmchimpa-field{ position: relative; width:100%; margin: 0 auto 10px auto; text-align: left; } #wpmchimpa .inputicon{ display: none; } #wpmchimpa .wpmc-ficon .inputicon { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; pointer-events: none; } #wpmchimpa .wpmc-ficon input[type="text"], #wpmchimpa .wpmc-ficon input[type="text"] ~ .inputlabel{ padding-left: 40px; } #wpmchimpa .wpmc-ficon [wpmcfield="email"] ~ .inputicon { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzZDNkM2QiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTUxMiwzODRjMCwxMS4yMTktMy4xNTYsMjEuNjI1LTguMjE5LDMwLjc4MUwzNDIuMTI1LDIzMy45MDZMNTAyLjAzMSw5NGM2LjIxOSw5Ljg3NSw5Ljk2OSwyMS40NjksOS45NjksMzRWMzg0eiBNMjU2LDI2Ni43NUw0NzguNSw3Mi4wNjNjLTkuMTI1LTUtMTkuNDA2LTguMDYzLTMwLjUtOC4wNjNINjRjLTExLjEwOSwwLTIxLjM5MSwzLjA2My0zMC40ODQsOC4wNjNMMjU2LDI2Ni43NXogTTMxOC4wMzEsMjU0Ljk2OSBsLTUxLjUsNDUuMDk0QzI2My41MTYsMzAyLjY4OCwyNTkuNzY2LDMwNCwyNTYsMzA0cy03LjUxNi0xLjMxMy0xMC41MzEtMy45MzhsLTUxLjUxNi00NS4wOTRMMzAuMjUsNDM4LjE1NiBDNDAuMDYzLDQ0NC4zMTMsNTEuNTYzLDQ0OCw2NCw0NDhoMzg0YzEyLjQzOCwwLDIzLjkzOC0zLjY4OCwzMy43NS05Ljg0NEwzMTguMDMxLDI1NC45Njl6IE05Ljk2OSw5NEMzLjc1LDEwMy44NzUsMCwxMTUuNDY5LDAsMTI4IHYyNTZjMCwxMS4yMTksMy4xNDEsMjEuNjI1LDguMjE5LDMwLjc4MWwxNjEuNjQxLTE4MC45MDZMOS45NjksOTR6Ii8+PC9zdmc+') no-repeat center} #wpmchimpa .wpmc-ficon [wpmcfield="FNAME"] ~ .inputicon { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzZDNkM2QiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNjEyIDYxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDYxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZD0iTTMwNi4wMDEsMzI1Ljk4OGM5MC41NjMtMC4wMDUsMTIzLjE0Ny05MC42ODIsMTMxLjY3OS0xNjUuMTY3QzQ0OC4xODgsNjkuMDYsNDA0Ljc5OSwwLDMwNi4wMDEsMCBjLTk4Ljc4MiwwLTE0Mi4xOTUsNjkuMDU1LTEzMS42NzksMTYwLjgyQzE4Mi44NjIsMjM1LjMwNCwyMTUuNDM2LDMyNS45OTUsMzA2LjAwMSwzMjUuOTg4eiIvPjxwYXRoIGQ9Ik01NTAuOTgxLDU0MS45MDhjLTAuOTktMjguOTA0LTQuMzc3LTU3LjkzOS05LjQyMS04Ni4zOTNjLTYuMTExLTM0LjQ2OS0xMy44ODktODUuMDAyLTQzLjk4My0xMDcuNDY1IGMtMTcuNDA0LTEyLjk4OC0zOS45NDEtMTcuMjQ5LTU5Ljg2NS0yNS4wODFjLTkuNjk3LTMuODEtMTguMzg0LTcuNTk0LTI2LjUzNy0xMS45MDFjLTI3LjUxOCwzMC4xNzYtNjMuNCw0NS45NjItMTA1LjE4Niw0NS45NjQgYy00MS43NzQsMC03Ny42NTItMTUuNzg2LTEwNS4xNjctNDUuOTY0Yy04LjE1Myw0LjMwOC0xNi44NCw4LjA5My0yNi41MzcsMTEuOTAxYy0xOS45MjQsNy44MzItNDIuNDYxLDEyLjA5Mi01OS44NjMsMjUuMDgxIGMtMzAuMDk2LDIyLjQ2My0zNy44NzMsNzIuOTk2LTQzLjk4MywxMDcuNDY1Yy01LjA0NSwyOC40NTQtOC40MzMsNTcuNDg5LTkuNDIyLDg2LjM5MwljLTAuNzY2LDIyLjM4NywxMC4yODgsMjUuNTI1LDI5LjAxNywzMi4yODRjMjMuNDUzLDguNDU4LDQ3LjY2NiwxNC43MzcsNzIuMDQxLDE5Ljg4NGM0Ny4wNzcsOS45NDEsOTUuNjAzLDE3LjU4MiwxNDMuOTIxLDE3LjkyNCBjNDguMzE4LTAuMzQzLDk2Ljg0NC03Ljk4MywxNDMuOTIxLTE3LjkyNGMyNC4zNzUtNS4xNDUsNDguNTktMTEuNDI0LDcyLjA0MS0xOS44ODQJQzU0MC42OTQsNTY3LjQzNSw1NTEuNzQ3LDU2NC4yOTcsNTUwLjk4MSw1NDEuOTA4eiIvPjwvZz48L3N2Zz4=') no-repeat center} #wpmchimpa .wpmc-ficon [wpmcfield="LNAME"] ~ .inputicon { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzZDNkM2QiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNjEyIDYxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDYxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZD0iTTMwNi4wMDEsMzI1Ljk4OGM5MC41NjMtMC4wMDUsMTIzLjE0Ny05MC42ODIsMTMxLjY3OS0xNjUuMTY3QzQ0OC4xODgsNjkuMDYsNDA0Ljc5OSwwLDMwNi4wMDEsMCBjLTk4Ljc4MiwwLTE0Mi4xOTUsNjkuMDU1LTEzMS42NzksMTYwLjgyQzE4Mi44NjIsMjM1LjMwNCwyMTUuNDM2LDMyNS45OTUsMzA2LjAwMSwzMjUuOTg4eiIvPjxwYXRoIGQ9Ik01NTAuOTgxLDU0MS45MDhjLTAuOTktMjguOTA0LTQuMzc3LTU3LjkzOS05LjQyMS04Ni4zOTNjLTYuMTExLTM0LjQ2OS0xMy44ODktODUuMDAyLTQzLjk4My0xMDcuNDY1IGMtMTcuNDA0LTEyLjk4OC0zOS45NDEtMTcuMjQ5LTU5Ljg2NS0yNS4wODFjLTkuNjk3LTMuODEtMTguMzg0LTcuNTk0LTI2LjUzNy0xMS45MDFjLTI3LjUxOCwzMC4xNzYtNjMuNCw0NS45NjItMTA1LjE4Niw0NS45NjQgYy00MS43NzQsMC03Ny42NTItMTUuNzg2LTEwNS4xNjctNDUuOTY0Yy04LjE1Myw0LjMwOC0xNi44NCw4LjA5My0yNi41MzcsMTEuOTAxYy0xOS45MjQsNy44MzItNDIuNDYxLDEyLjA5Mi01OS44NjMsMjUuMDgxIGMtMzAuMDk2LDIyLjQ2My0zNy44NzMsNzIuOTk2LTQzLjk4MywxMDcuNDY1Yy01LjA0NSwyOC40NTQtOC40MzMsNTcuNDg5LTkuNDIyLDg2LjM5MwljLTAuNzY2LDIyLjM4NywxMC4yODgsMjUuNTI1LDI5LjAxNywzMi4yODRjMjMuNDUzLDguNDU4LDQ3LjY2NiwxNC43MzcsNzIuMDQxLDE5Ljg4NGM0Ny4wNzcsOS45NDEsOTUuNjAzLDE3LjU4MiwxNDMuOTIxLDE3LjkyNCBjNDguMzE4LTAuMzQzLDk2Ljg0NC03Ljk4MywxNDMuOTIxLTE3LjkyNGMyNC4zNzUtNS4xNDUsNDguNTktMTEuNDI0LDcyLjA0MS0xOS44ODQJQzU0MC42OTQsNTY3LjQzNSw1NTEuNzQ3LDU2NC4yOTcsNTUwLjk4MSw1NDEuOTA4eiIvPjwvZz48L3N2Zz4=') no-repeat center} #wpmchimpa .wpmchimpa-field textarea, #wpmchimpa .wpmchimpa-field select, #wpmchimpa input[type="text"]{ text-align: left; width: 100%; height: 40px; border-radius:3px; background: #fff; padding: 0 10px; color: #353535; font-size:17px; outline:0; display: block; border: 1px solid #efefef; font-family:Tahoma, Geneva, sans-serif;font-size:15px;color:#696565;} #wpmchimpa .wpmchimpa-field.wpmchimpa-multidrop select{ height: 100px; } #wpmchimpa .wpmchimpa-field.wpmchimpa-drop:before{ content: ''; width: 40px; height: 40px; position: absolute; right: 0; top: 0; pointer-events: none; background: no-repeat center; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMwMDAiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgOTQuODU5IDk0Ljg1OSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTQuODU5IDk0Ljg1OSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjMxMiw0MS43NTdoNjAuMjM2YzAuNzcsMCwxLjQ2OS0wLjQ0LDEuODAyLTEuMTMzYzAuMzM0LTAuNjkxLDAuMjQxLTEuNTE0LTAuMjM3LTIuMTE0TDQ4Ljk5NCwwLjc1MyBDNDguNjE0LDAuMjc3LDQ4LjAzOSwwLDQ3LjQzMSwwcy0xLjE4NCwwLjI3Ny0xLjU2MywwLjc1M0wxNS43NDgsMzguNTFjLTAuNDc5LDAuNjAxLTAuNTcyLDEuNDIzLTAuMjM4LDIuMTE0IEMxNS44NDMsNDEuMzE3LDE2LjU0Miw0MS43NTcsMTcuMzEyLDQxLjc1N3oiLz4gPHBhdGggZD0iTTc3LjU0Nyw1My4xMDJIMTcuMzEyYy0wLjc2OSwwLTEuNDY5LDAuNDM5LTEuODAyLDEuMTMzYy0wLjMzNCwwLjY5MS0wLjI0MSwxLjUxNCwwLjIzOCwyLjExM2wzMC4xMTksMzcuNzU4IGMwLjM4LDAuNDc2LDAuOTU1LDAuNzUzLDEuNTYzLDAuNzUzczEuMTg0LTAuMjc3LDEuNTYzLTAuNzUzTDc5LjExLDU2LjM0OGMwLjQ3OS0wLjYwMSwwLjU3MS0xLjQyMiwwLjIzNy0yLjExMyBDNzkuMDE2LDUzLjU0MSw3OC4zMTcsNTMuMTAyLDc3LjU0Nyw1My4xMDJ6Ii8+PC9zdmc+'); } #wpmchimpa input[type="text"] ~ .inputlabel{ position: absolute; top: 0; left: 0; right: 0; pointer-events: none; width: 100%; line-height: 40px; color: rgba(0,0,0,0.6); font-size: 17px; font-weight:500; padding: 0 10px; white-space: nowrap; font-family:Tahoma, Geneva, sans-serif;font-size:15px;color:#696565;} #wpmchimpa input[type="text"]:valid + .inputlabel{ display: none; } #wpmchimpa select.wpmcerror, #wpmchimpa input[type="text"].wpmcerror{ border-color: red; } #wpmchimpa .wpmchimpa-check, #wpmchimpa .wpmchimpa-radio{ clear: both; } #wpmchimpa .wpmchimpa-check *, #wpmchimpa .wpmchimpa-radio *{ color: #fff; font-family:Tahoma, Geneva, sans-serif;font-size:14px;font-weight:normal;font-style:normal;color:#3d3d3d;} #wpmchimpa .wpmchimpa-item{ width:100%; display: inline-block; vertical-align: top; } #wpmchimpa .wpmchimpa-item input { display: none; } #wpmchimpa .wpmchimpa-item span { cursor: pointer; display: inline-block; position: relative; padding-left: 35px; line-height: 20px; margin-right: 10px; } #wpmchimpa .wpmchimpa-item span:before, #wpmchimpa .wpmchimpa-item span:after { content: ''; display: inline-block; width: 12px; height: 12px; left: 0; top: 4px; position: absolute; } #wpmchimpa .wpmchimpa-item span:before { border:1px solid #ccc; border-radius: 1px; background-color: #fff; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border: 1px solid#f34b38;background: #ffffff;} #wpmchimpa .wpmchimpa-item input[type='checkbox'] + span:hover:after, #wpmchimpa input[type='checkbox']:checked + span:after { content:''; width: 14px; height: 14px; background: no-repeat center; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMwMDAwMDAiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIzMCAyMzAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIzMCAyMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik05Mi4zNTYsMjIzLjU0OWM3LjQxLDcuNSwyMy45MTQsNS4wMTQsMjUuNjkxLTYuNzc5YzExLjA1Ni03My4yMTcsNjYuMzc4LTEzNC45ODUsMTA4LjI0My0xOTMuMTg5IEMyMzcuODk4LDcuNDUyLDIxMS4yMDctNy44NywxOTkuNzUsOC4wNjdDMTYxLjQ5Myw2MS4yNDksMTEzLjI3NCwxMTcuMjEsOTQuNDEsMTgxLjc0NCBjLTIxLjU1Ny0yMi4wMzEtNDMuMjAxLTQzLjg1My02Ny4zNzktNjMuMjEyYy0xNS4zMTItMTIuMjY1LTM3LjIxNSw5LjM0My0yMS43MzgsMjEuNzM3IEMzNi43OTQsMTY1LjUwMSw2NC4wMTcsMTk0LjkyNCw5Mi4zNTYsMjIzLjU0OXoiLz48L3N2Zz4='); } #wpmchimpa .wpmchimpa-item input[type='checkbox']:not(:checked) + span:hover:after { opacity: 0.5; } #wpmchimpa .wpmchimpa-item input[type='radio'] + span:before { border-radius: 50%; width: 12px; height: 12px; top: 4px; } #wpmchimpa input[type='radio']:checked + span:after { background: #000000; width: 8px; height: 8px; top: 6px; left: 2px; border-radius: 50%; } #wpmchimpa .wpmcinfierr{ display: block; height: 10px; text-align: left; line-height: 10px; margin-bottom: -10px; font-size: 10px; color: red; pointer-events: none; font-family:Tahoma, Geneva, sans-serif;} #wpmchimpa .wpmchimpa-subs-button{ border-radius: 0 3px 3px 0; width: 100%; color: #fff; font-size: 17px; border: 1px solid #FA0B38; background-color: #FF1F43; height: 40px; line-height: 40px; text-align: center; cursor: pointer; position: relative; top: 0; font-family:Tahoma, Geneva, sans-serif;font-size:16px;font-weight:normal;font-style:normal;color:#ffffff;background-color:#f34b38;} #wpmchimpa .wpmchimpa-subs-button::before{ content: 'Подписаться'; } #wpmchimpa .wpmchimpa-subs-button:hover{ background-color: #FA0B38; color:#ffffff;background-color:#75c462;} #wpmchimpa .wpmchimpa-subs-button.subsicon:before{ padding-left: 40px; } #wpmchimpa .wpmchimpa-subs-button.subsicon::after{ content:''; position: absolute; height: 40px; width: 40px; top: 0; left: 0; pointer-events: none; } .wpmchimpa-overlay-bg.signalshow .wpmchimpa-subs-button::after, .wpmchimpa-overlay-bg.signalshow .wpmchimpa-subs-button::before{ display: none; } #wpmchimpa-main .wpmchimpa-signal { display: none; z-index: 1; top: 5px; left: calc(50% - 20px); position: absolute; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .wpmchimpa-overlay-bg.signalshow #wpmchimpa-main .wpmchimpa-signal { display: inline-block; } #wpmchimpa-main .wpmchimpa-feedback{ text-align: center; position: relative; color: #ccc; font-size: 10px; height: 12px; margin-top: -12px; font-family:Tahoma, Geneva, sans-serif;color:#3d3d3d;} #wpmchimpa-main .wpmchimpa-tag{ margin: 5px auto; } #wpmchimpa-main .wpmchimpa-tag, #wpmchimpa-main .wpmchimpa-tag *{ color:#fff; font-size: 10px; font-family:Tahoma, Geneva, sans-serif;font-size:10px;color:#3d3d3d;} #wpmchimpa-main .wpmchimpa-tag:before{ content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzZDNkM2QiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTQxNy41NjYsMjA5LjgzaC05LjQ4NHYtNDQuMzg4YzAtODIuMDk5LTY1LjE1MS0xNTAuNjgxLTE0Ni41ODItMTUyLjE0NWMtMi4yMjQtMC4wNC02LjY3MS0wLjA0LTguODk1LDAgYy04MS40MzIsMS40NjQtMTQ2LjU4Miw3MC4wNDYtMTQ2LjU4MiwxNTIuMTQ1djQ0LjM4OGgtOS40ODVDODEuOTIyLDIwOS44Myw3MCwyMjQuOTEyLDcwLDI0My41Mzl2MjIyLjYzMiAgQzcwLDQ4NC43NzcsODEuOTIyLDUwMCw5Ni41MzksNTAwaDMyMS4wMjhjMTQuNjE3LDAsMjYuNTM5LTE1LjIyMywyNi41MzktMzMuODI5VjI0My41MzkgIEM0NDQuMTA1LDIyNC45MTIsNDMyLjE4NCwyMDkuODMsNDE3LjU2NiwyMDkuODN6IE0yODcuMTI5LDM1NC42Mjl2NjcuMjdjMCw3LjcwNC02LjQ0OSwxNC4yMjItMTQuMTU5LDE0LjIyMmgtMzEuODM0ICBjLTcuNzEsMC0xNC4xNTktNi41MTgtMTQuMTU5LTE0LjIyMnYtNjcuMjdjLTcuNDc3LTcuMzYxLTExLjgzLTE3LjUzNy0xMS44My0yOC43OTVjMC0yMS4zMzQsMTYuNDkxLTM5LjY2NiwzNy40NTktNDAuNTEyICBjMi4yMjItMC4wOSw2LjY3My0wLjA5LDguODk1LDBjMjAuOTY4LDAuODQ2LDM3LjQ1OSwxOS4xNzgsMzcuNDU5LDQwLjUxMkMyOTguOTU5LDMzNy4wOTIsMjk0LjYwNSwzNDcuMjY4LDI4Ny4xMjksMzU0LjYyOXogTTM0NS41NzIsMjA5LjgzSDI2MS41aC04Ljg5NWgtODQuMDcydi00NC4zODhjMC00OC45MDUsMzkuNzQ0LTg5LjM0Miw4OC41MTktODkuMzQyczg4LjUyLDQwLjQzNyw4OC41Miw4OS4zNDJWMjA5LjgzeiIvPjwvc3ZnPg=='); margin: 5px; top: 1px; position:relative; } #wpmchimpa-main .wpmchimpa-social{ display: inline-block; margin: 12px auto 0; height: 90px; width: 100%; background: rgba(75, 75, 75, 0.3); box-shadow: 0px 1px 1px 1px rgba(116, 116, 116, 0.94); } #wpmchimpa-main .wpmchimpa-social::before{ content: 'Subscribe with'; font-size: 13px; color: #ADACB2; width: 100%; display: block; margin: 15px auto 5px; } #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc{ display: inline-block; width:40px; height: 40px; border-radius: 2px; cursor: pointer; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; -webkit-backface-visibility:hidden; border:1px solid #262E43; border-color: #ffffff;} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc::before{ content: ''; display: block; width:40px; height: 40px; background: no-repeat center; } #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-fb { display:none;} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-fb::before { background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI5Ni4yOTYsNTEySDIwMC4zNlYyNTZoLTY0di04OC4yMjVsNjQtMC4wMjlsLTAuMTA0LTUxLjk3NkMyMDAuMjU2LDQzLjc5NCwyMTkuNzczLDAsMzA0LjU1NiwwaDcwLjU4OHY4OC4yNDJoLTQ0LjExNSBjLTMzLjAxNiwwLTM0LjYwNCwxMi4zMjgtMzQuNjA0LDM1LjM0MmwtMC4xMzEsNDQuMTYyaDc5LjM0NmwtOS4zNTQsODguMjI1TDI5Ni4zNiwyNTZMMjk2LjI5Niw1MTJ6Ii8+PC9zdmc+')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-fb:hover:before { background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMyZDYwOWIiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI5Ni4yOTYsNTEySDIwMC4zNlYyNTZoLTY0di04OC4yMjVsNjQtMC4wMjlsLTAuMTA0LTUxLjk3NkMyMDAuMjU2LDQzLjc5NCwyMTkuNzczLDAsMzA0LjU1NiwwaDcwLjU4OHY4OC4yNDJoLTQ0LjExNSBjLTMzLjAxNiwwLTM0LjYwNCwxMi4zMjgtMzQuNjA0LDM1LjM0MmwtMC4xMzEsNDQuMTYyaDc5LjM0NmwtOS4zNTQsODguMjI1TDI5Ni4zNiwyNTZMMjk2LjI5Niw1MTJ6Ii8+PC9zdmc+')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-gp { display:none;} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-gp:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI3My4zNzIsMzAyLjQ5OGMtNS4wNDEtNi43NjItMTAuNjA4LTEzLjA0NS0xNi43LTE4Ljg0MmMtNi4wOTEtNS44MDQtMTIuMTgzLTExLjA4OC0xOC4yNzEtMTUuODQ1IGMtNi4wOTItNC43NTctMTEuNjU5LTkuMzI5LTE2LjcwMi0xMy43MDljLTUuMDQyLTQuMzc0LTkuMTM1LTguOTQ1LTEyLjI3NS0xMy43MDJjLTMuMTQtNC43NTctNC43MTEtOS42MS00LjcxMS0xNC41NTggYzAtNi44NTUsMi4xOS0xMy4yNzgsNi41NjctMTkuMjc0YzQuMzc3LTUuOTk2LDkuNzA3LTExLjc5OSwxNS45ODYtMTcuNDE3YzYuMjgtNS42MTcsMTIuNTU5LTExLjc1MywxOC44NDQtMTguNDE1IGM2LjI3Ni02LjY2NSwxMS42MDQtMTUuNDY1LDE1Ljk4NS0yNi40MTJjNC4zNzMtMTAuOTQ0LDYuNTYzLTIzLjQ1OCw2LjU2My0zNy41NDJjMC0xNi43NS0zLjcxMy0zMi44MzUtMTEuMTM2LTQ4LjI1IGMtNy40MjMtMTUuNDE4LTE3Ljg5LTI3LjQxMi0zMS40MDUtMzUuOTc2aDM4LjU0TDMwMy4yLDBIMTc4LjQ0MWMtMTcuNjk5LDAtMzUuNDk4LDEuOTA2LTUzLjM4NCw1LjcyIGMtMjYuNDUzLDUuOS00OC43MjMsMTkuMzY4LTY2LjgwNiw0MC4zOTdDNDAuMTcxLDY3LjE1LDMxLjEyOSw5MC45OSwzMS4xMjksMTE3LjYzN2MwLDI4LjE3MSwxMC4xMzgsNTEuNTgzLDMwLjQwNiw3MC4yMzMgYzIwLjI2OSwxOC42NDksNDQuNTg1LDI3Ljk3OCw3Mi45NDUsMjcuOTc4YzUuNzEsMCwxMi4zNzEtMC40NzgsMTkuOTg1LTEuNDI3Yy0wLjM4MSwxLjUyMS0xLjA0MywzLjU2Ny0xLjk5Nyw2LjEzNiBzLTEuNzE1LDQuNjItMi4yODYsNi4xNGMtMC41NywxLjUyMS0xLjA0NywzLjM3NS0xLjQyNSw1LjU2NmMtMC4zODIsMi4xOS0wLjU3MSw0LjQyOC0wLjU3MSw2LjcxIGMwLDEyLjU2Myw2LjA4NiwyNi43NDQsMTguMjcxLDQyLjU0MWMtMTQuNDY1LDAuMzg3LTI4LjczNywxLjY3LTQyLjgyNSwzLjg2Yy0xNC4wODQsMi4xOS0yOC44MzMsNS42MTYtNDQuMjUyLDEwLjI4IGMtMTUuNDE3LDQuNjYxLTI5LjIxNywxMS40Mi00MS4zOTYsMjAuMjdjLTEyLjE4Miw4Ljg1NC0yMS4zMTcsMTkuMzY2LTI3LjQwOCwzMS41NDlDMy41MzMsMzYxLjU1OSwwLjAxLDM3NC40MDUsMC4wMSwzODYuMDE3IGMwLDEyLjc1MSwyLjg1NywyNC4zMTQsOC41NjUsMzQuNjljNS43MDgsMTAuMzY5LDEzLjAzNSwxOC44NDIsMjEuOTgyLDI1LjQwNmM4Ljk0NSw2LjU3LDE5LjI3MywxMi4wODMsMzAuOTc4LDE2LjU2MiBjMTEuNzA0LDQuNDcsMjMuMzE1LDcuNjU5LDM0LjgyOSw5LjU2MmMxMS41MTYsMS45MDMsMjIuODg4LDIuODU0LDM0LjExOSwyLjg1NGM1MS4wMDcsMCw5MC45ODEtMTIuNDY0LDExOS45MDktMzcuMzk3IGMyNi42NDgtMjMuMjIzLDM5Ljk3MS01MC4wNjIsMzkuOTcxLTgwLjUxN2MwLTEwLjg1NS0xLjU3LTIwLjk4NC00LjcxMi0zMC40MDlDMjgyLjUxLDMxNy4zMzcsMjc4LjQyLDMwOS4yNTQsMjczLjM3MiwzMDIuNDk4eiBNMTYzLjMxMSwxOTguNzIyYy05LjcwNywwLTE4LjkzNy0yLjQ3NS0yNy42OTQtNy40MjZjLTguNzU3LTQuOTUtMTYuMTgtMTEuMzc0LTIyLjI3LTE5LjI3MyBjLTYuMDg4LTcuODk4LTExLjQxOC0xNi43OTYtMTUuOTg3LTI2LjY5NWMtNC41NjctOS44OTYtNy45NDQtMTkuNzkyLTEwLjEzNS0yOS42OTJjLTIuMTktOS44OTUtMy4yODQtMTkuMzE4LTMuMjg0LTI4LjI2NSBjMC0xOC4yNzEsNC44NTQtMzMuOTc0LDE0LjU2Mi00Ny4xMDhjOS43MDUtMTMuMTM0LDIzLjQxMS0xOS43MDEsNDEuMTEyLTE5LjcwMWMxMi41NjMsMCwyMy45MzUsMy44OTksMzQuMTE4LDExLjcwNCBjMTAuMTgzLDcuODA0LDE4LjE3NywxNy43MDEsMjMuOTg0LDI5LjY5MmM1LjgwMiwxMS45OTEsMTAuMjc3LDI0LjQwNywxMy40MTcsMzcuMjU3YzMuMTQsMTIuODQ3LDQuNzExLDI0Ljk4Myw0LjcxMSwzNi40MDMgYzAsMTkuMDM2LTQuMTM5LDM0LjMxNy0xMi40MTksNDUuODMzQzE5NS4xNDQsMTkyLjk2NCwxODEuNzc1LDE5OC43MjIsMTYzLjMxMSwxOTguNzIyeiBNMjQyLjI1MSw0MTMuMTIzIGMtNS4yMyw4Ljk0OS0xMi4zMTksMTUuOTQtMjEuMjY3LDIwLjk4MWMtOC45NDYsNS4wNDgtMTguNTA5LDguNzU4LTI4LjY5MywxMS4xNGMtMTAuMTgzLDIuMzg1LTIwLjg4OSwzLjU3Mi0zMi4xMiwzLjU3MiBjLTEyLjE4MiwwLTI0LjI3LTEuNDMxLTM2LjI1OC00LjI4NGMtMTEuOTktMi44NTEtMjMuNDU5LTcuMTg3LTM0LjQwMy0xMi45OTFjLTEwLjk0NC01LjgtMTkuNzk1LTEzLjc5OC0yNi41NTEtMjMuOTgyIGMtNi43NTctMTAuMTg0LTEwLjEzNS0yMS43NDQtMTAuMTM1LTM0LjY5YzAtMTEuNDE5LDIuNTY4LTIxLjYwMSw3LjcwOC0zMC41NWM1LjE0Mi04Ljk0NSwxMS43MDktMTYuMDg0LDE5LjcwMi0yMS40MDggYzcuOTk0LTUuMzMyLDE3LjMxOS05LjcxMywyNy45NzktMTMuMTMxYzEwLjY2LTMuNDMzLDIwLjkzNy01LjgwOCwzMC44MzMtNy4xMzljOS44OTUtMS4zMzUsMTkuOTg1LTEuOTk1LDMwLjI2Mi0xLjk5NSBjNi4yODMsMCwxMS4wNDMsMC4xOTEsMTQuMjc3LDAuNTY3YzEuMTQzLDAuNzY3LDQuMDQzLDIuNzU5LDguNzA4LDUuOTk2czcuODA0LDUuNDI4LDkuNDIzLDYuNTcgYzEuNjE1LDEuMTM3LDQuNTY3LDMuMzI2LDguODUsNi41NjNjNC4yODEsMy4yMzcsNy4zMjcsNS42NjEsOS4xMzUsNy4yNzljMS44MDMsMS42MTgsNC40MjEsNC4wNDUsNy44NDksNy4yNzkgYzMuNDI0LDMuMjM3LDUuOTQ4LDYuMDQzLDcuNTY2LDguNDIyYzEuNjE1LDIuMzc4LDMuNjE2LDUuMjgsNS45OTYsOC43MDJjMi4zOCwzLjQzMyw0LjA0Myw2LjcxNSw0Ljk5OCw5Ljg1NSBjMC45NDgsMy4xNDIsMS44NTQsNi41NjcsMi43MDcsMTAuMjc3YzAuODU1LDMuNzIsMS4yODMsNy41NjksMS4yODMsMTEuNTdDMjUwLjEwNSwzOTMuNzEzLDI0Ny40ODcsNDA0LjE4MiwyNDIuMjUxLDQxMy4xMjN6Ii8+IDxwb2x5Z29uIHBvaW50cz0iNDAxLjk5OCw3My4wODkgNDAxLjk5OCwwIDM2NS40NDksMCAzNjUuNDQ5LDczLjA4OSAyOTIuMzU4LDczLjA4OSAyOTIuMzU4LDEwOS42MzYgMzY1LjQ0OSwxMDkuNjM2ICAzNjUuNDQ5LDE4Mi43MjUgNDAxLjk5OCwxODIuNzI1IDQwMS45OTgsMTA5LjYzNiA0NzUuMDgxLDEwOS42MzYgNDc1LjA4MSw3My4wODkiLz48L3N2Zz4=')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-gp:hover:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNlYjQwMjYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI3My4zNzIsMzAyLjQ5OGMtNS4wNDEtNi43NjItMTAuNjA4LTEzLjA0NS0xNi43LTE4Ljg0MmMtNi4wOTEtNS44MDQtMTIuMTgzLTExLjA4OC0xOC4yNzEtMTUuODQ1IGMtNi4wOTItNC43NTctMTEuNjU5LTkuMzI5LTE2LjcwMi0xMy43MDljLTUuMDQyLTQuMzc0LTkuMTM1LTguOTQ1LTEyLjI3NS0xMy43MDJjLTMuMTQtNC43NTctNC43MTEtOS42MS00LjcxMS0xNC41NTggYzAtNi44NTUsMi4xOS0xMy4yNzgsNi41NjctMTkuMjc0YzQuMzc3LTUuOTk2LDkuNzA3LTExLjc5OSwxNS45ODYtMTcuNDE3YzYuMjgtNS42MTcsMTIuNTU5LTExLjc1MywxOC44NDQtMTguNDE1IGM2LjI3Ni02LjY2NSwxMS42MDQtMTUuNDY1LDE1Ljk4NS0yNi40MTJjNC4zNzMtMTAuOTQ0LDYuNTYzLTIzLjQ1OCw2LjU2My0zNy41NDJjMC0xNi43NS0zLjcxMy0zMi44MzUtMTEuMTM2LTQ4LjI1IGMtNy40MjMtMTUuNDE4LTE3Ljg5LTI3LjQxMi0zMS40MDUtMzUuOTc2aDM4LjU0TDMwMy4yLDBIMTc4LjQ0MWMtMTcuNjk5LDAtMzUuNDk4LDEuOTA2LTUzLjM4NCw1LjcyIGMtMjYuNDUzLDUuOS00OC43MjMsMTkuMzY4LTY2LjgwNiw0MC4zOTdDNDAuMTcxLDY3LjE1LDMxLjEyOSw5MC45OSwzMS4xMjksMTE3LjYzN2MwLDI4LjE3MSwxMC4xMzgsNTEuNTgzLDMwLjQwNiw3MC4yMzMgYzIwLjI2OSwxOC42NDksNDQuNTg1LDI3Ljk3OCw3Mi45NDUsMjcuOTc4YzUuNzEsMCwxMi4zNzEtMC40NzgsMTkuOTg1LTEuNDI3Yy0wLjM4MSwxLjUyMS0xLjA0MywzLjU2Ny0xLjk5Nyw2LjEzNiBzLTEuNzE1LDQuNjItMi4yODYsNi4xNGMtMC41NywxLjUyMS0xLjA0NywzLjM3NS0xLjQyNSw1LjU2NmMtMC4zODIsMi4xOS0wLjU3MSw0LjQyOC0wLjU3MSw2LjcxIGMwLDEyLjU2Myw2LjA4NiwyNi43NDQsMTguMjcxLDQyLjU0MWMtMTQuNDY1LDAuMzg3LTI4LjczNywxLjY3LTQyLjgyNSwzLjg2Yy0xNC4wODQsMi4xOS0yOC44MzMsNS42MTYtNDQuMjUyLDEwLjI4IGMtMTUuNDE3LDQuNjYxLTI5LjIxNywxMS40Mi00MS4zOTYsMjAuMjdjLTEyLjE4Miw4Ljg1NC0yMS4zMTcsMTkuMzY2LTI3LjQwOCwzMS41NDlDMy41MzMsMzYxLjU1OSwwLjAxLDM3NC40MDUsMC4wMSwzODYuMDE3IGMwLDEyLjc1MSwyLjg1NywyNC4zMTQsOC41NjUsMzQuNjljNS43MDgsMTAuMzY5LDEzLjAzNSwxOC44NDIsMjEuOTgyLDI1LjQwNmM4Ljk0NSw2LjU3LDE5LjI3MywxMi4wODMsMzAuOTc4LDE2LjU2MiBjMTEuNzA0LDQuNDcsMjMuMzE1LDcuNjU5LDM0LjgyOSw5LjU2MmMxMS41MTYsMS45MDMsMjIuODg4LDIuODU0LDM0LjExOSwyLjg1NGM1MS4wMDcsMCw5MC45ODEtMTIuNDY0LDExOS45MDktMzcuMzk3IGMyNi42NDgtMjMuMjIzLDM5Ljk3MS01MC4wNjIsMzkuOTcxLTgwLjUxN2MwLTEwLjg1NS0xLjU3LTIwLjk4NC00LjcxMi0zMC40MDlDMjgyLjUxLDMxNy4zMzcsMjc4LjQyLDMwOS4yNTQsMjczLjM3MiwzMDIuNDk4eiBNMTYzLjMxMSwxOTguNzIyYy05LjcwNywwLTE4LjkzNy0yLjQ3NS0yNy42OTQtNy40MjZjLTguNzU3LTQuOTUtMTYuMTgtMTEuMzc0LTIyLjI3LTE5LjI3MyBjLTYuMDg4LTcuODk4LTExLjQxOC0xNi43OTYtMTUuOTg3LTI2LjY5NWMtNC41NjctOS44OTYtNy45NDQtMTkuNzkyLTEwLjEzNS0yOS42OTJjLTIuMTktOS44OTUtMy4yODQtMTkuMzE4LTMuMjg0LTI4LjI2NSBjMC0xOC4yNzEsNC44NTQtMzMuOTc0LDE0LjU2Mi00Ny4xMDhjOS43MDUtMTMuMTM0LDIzLjQxMS0xOS43MDEsNDEuMTEyLTE5LjcwMWMxMi41NjMsMCwyMy45MzUsMy44OTksMzQuMTE4LDExLjcwNCBjMTAuMTgzLDcuODA0LDE4LjE3NywxNy43MDEsMjMuOTg0LDI5LjY5MmM1LjgwMiwxMS45OTEsMTAuMjc3LDI0LjQwNywxMy40MTcsMzcuMjU3YzMuMTQsMTIuODQ3LDQuNzExLDI0Ljk4Myw0LjcxMSwzNi40MDMgYzAsMTkuMDM2LTQuMTM5LDM0LjMxNy0xMi40MTksNDUuODMzQzE5NS4xNDQsMTkyLjk2NCwxODEuNzc1LDE5OC43MjIsMTYzLjMxMSwxOTguNzIyeiBNMjQyLjI1MSw0MTMuMTIzIGMtNS4yMyw4Ljk0OS0xMi4zMTksMTUuOTQtMjEuMjY3LDIwLjk4MWMtOC45NDYsNS4wNDgtMTguNTA5LDguNzU4LTI4LjY5MywxMS4xNGMtMTAuMTgzLDIuMzg1LTIwLjg4OSwzLjU3Mi0zMi4xMiwzLjU3MiBjLTEyLjE4MiwwLTI0LjI3LTEuNDMxLTM2LjI1OC00LjI4NGMtMTEuOTktMi44NTEtMjMuNDU5LTcuMTg3LTM0LjQwMy0xMi45OTFjLTEwLjk0NC01LjgtMTkuNzk1LTEzLjc5OC0yNi41NTEtMjMuOTgyIGMtNi43NTctMTAuMTg0LTEwLjEzNS0yMS43NDQtMTAuMTM1LTM0LjY5YzAtMTEuNDE5LDIuNTY4LTIxLjYwMSw3LjcwOC0zMC41NWM1LjE0Mi04Ljk0NSwxMS43MDktMTYuMDg0LDE5LjcwMi0yMS40MDggYzcuOTk0LTUuMzMyLDE3LjMxOS05LjcxMywyNy45NzktMTMuMTMxYzEwLjY2LTMuNDMzLDIwLjkzNy01LjgwOCwzMC44MzMtNy4xMzljOS44OTUtMS4zMzUsMTkuOTg1LTEuOTk1LDMwLjI2Mi0xLjk5NSBjNi4yODMsMCwxMS4wNDMsMC4xOTEsMTQuMjc3LDAuNTY3YzEuMTQzLDAuNzY3LDQuMDQzLDIuNzU5LDguNzA4LDUuOTk2czcuODA0LDUuNDI4LDkuNDIzLDYuNTcgYzEuNjE1LDEuMTM3LDQuNTY3LDMuMzI2LDguODUsNi41NjNjNC4yODEsMy4yMzcsNy4zMjcsNS42NjEsOS4xMzUsNy4yNzljMS44MDMsMS42MTgsNC40MjEsNC4wNDUsNy44NDksNy4yNzkgYzMuNDI0LDMuMjM3LDUuOTQ4LDYuMDQzLDcuNTY2LDguNDIyYzEuNjE1LDIuMzc4LDMuNjE2LDUuMjgsNS45OTYsOC43MDJjMi4zOCwzLjQzMyw0LjA0Myw2LjcxNSw0Ljk5OCw5Ljg1NSBjMC45NDgsMy4xNDIsMS44NTQsNi41NjcsMi43MDcsMTAuMjc3YzAuODU1LDMuNzIsMS4yODMsNy41NjksMS4yODMsMTEuNTdDMjUwLjEwNSwzOTMuNzEzLDI0Ny40ODcsNDA0LjE4MiwyNDIuMjUxLDQxMy4xMjN6Ii8+IDxwb2x5Z29uIHBvaW50cz0iNDAxLjk5OCw3My4wODkgNDAxLjk5OCwwIDM2NS40NDksMCAzNjUuNDQ5LDczLjA4OSAyOTIuMzU4LDczLjA4OSAyOTIuMzU4LDEwOS42MzYgMzY1LjQ0OSwxMDkuNjM2ICAzNjUuNDQ5LDE4Mi43MjUgNDAxLjk5OCwxODIuNzI1IDQwMS45OTgsMTA5LjYzNiA0NzUuMDgxLDEwOS42MzYgNDc1LjA4MSw3My4wODkiLz48L3N2Zz4=')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-ms { display:none;} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-ms::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTcgMTciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE3IDE3IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNOC4wMjEsMS4zODV2Ni40MzdoOC43OTFWMC4xMjdMOC4wMjEsMS4zODV6IE0wLDcuODIyaDYuNjQ4VjEuNDk0TDAsMi40NDNWNy44MjJ6IE0wLDE0LjE3NSBsNi42NDgsMS4wMzFWOC42M0gwVjE0LjE3NXogTTguMDIxLDE1LjMyMWw4Ljc5MSwxLjM2NFY4LjYzSDguMDIxVjE1LjMyMXoiLz48L3N2Zz4=')} #wpmchimpa-main .wpmchimpa-social .wpmchimpa-soc.wpmchimpa-ms:hover:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMwMEJDRjIiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTcgMTciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE3IDE3IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNOC4wMjEsMS4zODV2Ni40MzdoOC43OTFWMC4xMjdMOC4wMjEsMS4zODV6IE0wLDcuODIyaDYuNjQ4VjEuNDk0TDAsMi40NDNWNy44MjJ6IE0wLDE0LjE3NSBsNi42NDgsMS4wMzFWOC42M0gwVjE0LjE3NXogTTguMDIxLDE1LjMyMWw4Ljc5MSwxLjM2NFY4LjYzSDguMDIxVjE1LjMyMXoiLz48L3N2Zz4=')} #wpmchimpa-main .wpmchimpa-close-button{ position: absolute; display: block; top: 0; right: 0; width: 25px; text-align: center; cursor: pointer; } #wpmchimpa-main .wpmchimpa-close-button::before{ content: "\00D7"; font-size: 25px; line-height: 25px; font-weight: 100; color: #999; opacity: 0.4; color:;} #wpmchimpa-main .wpmchimpa-close-button:hover:before{ opacity: 1; } #wpmchimpa-main .wpmchimpa-feedback.wpmchimpa-done{ font-size: 15px; margin: 10px; height: auto;} #wpmchimpa-main .wpmchimpa-feedback.wpmchimpa-done:before{ content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSIxNDIuOCwzMjMuODUgMzUuNywyMTYuNzUgMCwyNTIuNDUgMTQyLjgsMzk1LjI1IDQ0OC44LDg5LjI1IDQxMy4xLDUzLjU1Ii8+PC9zdmc+'); width: 40px; height: 40px; border-radius: 20px; line-height: 46px; display: block; background-color: #01E169; margin: 40px auto; } .wpmc_2col #wpmchimpa .wpmc_colsplit{ width: calc(50% - 5px); display: inline-block; float: left; } .wpmc_2col #wpmchimpa .wpmc_coleven{ margin-left: 10px; } @media only screen and (max-width: 600px){ .wpmc_2col #wpmchimpa .wpmc_colsplit{ width: 100%; margin-left: 0; } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } .animatedout { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } </style> <div class="wpmchimpa-reset wpmchimpa-overlay-bg wpmchimpselector chimpmatecss"> <div class="wpmchimpa-maina bounceInDown animated" wpmcexitanim> <div class="wpmchimpa-mainc"> <div id="wpmchimpa-main"> <div id="wpmchimpa-newsletterform" class="wpmchimpa-wrapper"> <div class="wpmchimpa" id="wpmchimpa"> <h3>LA CAMPANA</h3> <div class="wpmchimpa_para"><div style="text-align: center;">C'è chi legge questa notizia prima di te.</div><div style="text-align: center;">Iscriviti per ricevere articoli freschi. <img src="http://" loading=lazy></div></div> <form wpmc_suc wpmc_msg="Спасибо! ПРОВЕРЬТЕ ПОЧТУ" action="" method="post"> <input type="hidden" name="action" value="wpmchimpa_add_email_ajax"/> <input type="hidden" name="wpmcform" value="1"/> <div class="formbox wpmchimpa-field"><div class="wpmchimpa-text wpmc-ficon"><input type="text" name="email" wpmctype="email" wpmcfield="email" wpmcreq="true" required/><span class="inputlabel">E-mail</span><span class="inputicon"></span><div class="wpmcinfierr" wpmcerr="email"></div></div><div class="wpmchimpa-subsc"><div class="wpmchimpa-subs-button"></div><div class="wpmchimpa-signal"><style type="text/css">#wpmchimpa-main .sp8 { margin: 0 auto;width: 50px;height: 30px;} #wpmchimpa-main .sp8 > div { background-color: #3d3d3d;margin-left: 3px;height: 100%;width: 6px;display: inline-block;-webkit-animation: wpmchimpa-mainsp8 1.2s infinite ease-in-out;animation: wpmchimpa-mainsp8 1.2s infinite ease-in-out;} #wpmchimpa-main .sp8 .sp82 { -webkit-animation-delay: -1.1s;animation-delay: -1.1s;} #wpmchimpa-main .sp8 .sp83 { -webkit-animation-delay: -1.0s;animation-delay: -1.0s;} #wpmchimpa-main .sp8 .sp84 { -webkit-animation-delay: -0.9s;animation-delay: -0.9s;} #wpmchimpa-main .sp8 .sp85 { -webkit-animation-delay: -0.8s;animation-delay: -0.8s;} @-webkit-keyframes wpmchimpa-mainsp8 { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } }@keyframes wpmchimpa-mainsp8 { 0%, 40%, 100% { transform: scaleY(0.4);-webkit-transform: scaleY(0.4);} 20% { transform: scaleY(1.0);-webkit-transform: scaleY(1.0);} }</style><div class="sp8"><div class="sp81"></div><div class="sp82"></div><div class="sp83"></div><div class="sp84"></div><div class="sp85"></div></div></div></div><div style="clear:both"></div></div><div class="wpmchimpa-field wpmchimpa-text wpmc_colsplit wpmc-ficon"><input type="text" name="merge_fields[FNAME]" wpmctype="text" wpmcfield="FNAME" wpmcreq="true" required/><span class="inputlabel">Nome</span><span class="inputicon"></span><div class="wpmcinfierr" wpmcerr="FNAME"></div></div><div class="wpmchimpa-field wpmchimpa-text wpmc_colsplit wpmc-ficon"><input type="text" name="merge_fields[LNAME]" wpmctype="text" wpmcfield="LNAME" wpmcreq="true" required/><span class="inputlabel">Cognome</span><span class="inputicon"></span><div class="wpmcinfierr" wpmcerr="LNAME"></div></div><div class="wpmchimpa-field wpmchimpa-radio"><div class="wpmchimpa-itemh">Come vuoi leggere The Bell</div><div class="wpmchimpa-itemb"><label class="wpmchimpa-item"><input type="radio" name="group[f899931c09]" value="a22e2103b4" wpmctype="radio" wpmcfield="f899931c09" wpmcreq="true"><span>Due volte al giorno</span></label><label class="wpmchimpa-item"><input type="radio" name="group[f899931c09]" value="4ab55de31a" wpmctype="radio" wpmcfield="f899931c09" wpmcreq="true"><span>Mailing mattutino</span></label><label class="wpmchimpa-item"><input type="radio" name="group[f899931c09]" value="e386c1935e" wpmctype="radio" wpmcfield="f899931c09" wpmcreq="true"><span>Mailing serale</span></label></div><div class="wpmcinfierr" wpmcerr="f899931c09"></div></div> <div style="clear:both"></div> <div class="wpmchimpa-tag">Niente spam</div> </form> <div class="wpmchimpa-feedback" wpmcerr="gen"></div> </div> </div> <div class="wpmchimpa-close-button"></div> </div> </div> </div> </div><script data-cfasync="false" src="/cdn-cgi/scripts/af2821b0/cloudflare-static/email-decode.min.js"></script><script type='text/javascript' src='https://qipu.ru/wp-content/themes/authentic/js/vendors.min.js?ver=201710093'></script> <script type='text/javascript'> /* <![CDATA[ */ var translation = { "next":"Next","previous":"Previous"} ; /* ]]> */ </script> <script type='text/javascript' src='https://qipu.ru/wp-content/themes/authentic/js/scripts.js?ver=201710093'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=9.9.9'></script> <script type='text/javascript' src='https://qipu.ru/wp-content/plugins/chimpmatepro/public/assets/js/public.js?ver=1.3.2'></script> </body> </html>

LA CAMPANA

Bootstrap 4 Modelli in arrivo

Prossimamente Bootstrap 4 (gratuito)

Fluido - modello animato disponibile a breve (a pagamento)

Bootstrap 4 modelli di pagina di destinazione

Atterraggio materiale (gratuito)

Inizia semplice (gratuito)

Fantastica app (gratuita)

Pixel - Modello HTML5 di atterraggio di app creative

Bootstrap 4 Modelli di avvio / agenzia

Agenzia (gratuita)

Tema Bell Bootstrap 4 (gratuito)

Fitness (gratuito)

Bootstrap 4 Modelli del pannello di amministrazione

Dashboard Bootstrap Light (gratuito)

Amministratore modulare (gratuito)

CoreUI Bootstrap 4 Admin (gratuito)

Pagine - Modello Dashboard amministratore Bootstrap 4

Risorse aggiuntive per la lezione di Bootstrap 4

1. I parametri principali della griglia per impostazione predefinita

2. Layout automatico delle colonne

2.1 Colonne della stessa larghezza

2.2 Impostazione della larghezza di una colonna

2.3 Contenuto a larghezza variabile

2.4 Multi-fila

3. Classi adattive

3.1 Punti di interruzione

3.2 Su dispositivi mobili

3.3 Creazione di una griglia composita complessa

4. Allineamento

4.1 Allineamento verticale

4.2 Allineamento orizzontale

4.3 Eliminazione di campi tra le colonne

4.4 Trasferimento di colonne in una nuova riga

5. L'ordine degli elementi

5.1 Classi di ordine degli elementi

5.2 Offset colonna

5.2.1 Classi di offset

6. Nesting

Bootstrap Learning Toolkit

Download di Bootstrap Framework

Disimballare l'archivio Bootstrap

Collega Bootstrap a una pagina HTML

Installazione

Ciao< /h1> Questo codice è direttamente dalla pagina di avvio di Bootstrap 4.Con questo modello, puoi iniziare subito a utilizzare Bootstrap. Il vantaggio è che è facile iniziare, ma lo svantaggio è che ti manca la configurazione che offre Sass.

Installa Bootstrap 4 tramite NPM

Ciao< /h1>
Questo codice è direttamente dalla pagina di avvio di Bootstrap 4.
Con questo modello, puoi iniziare subito a utilizzare Bootstrap. Il vantaggio è che è facile iniziare, ma lo svantaggio è che ti manca la configurazione che offre Sass.