Dezvoltare avansată a interfeței web Bootstrap Framework

Într-un alt tutorial, a fost explicată o introducere în interfețele de utilizator Bootstrap și, de asemenea, un tutorial despre cum să proiectăm un proiect web cu Bootstrap 2.0, în acest sens ne vom deplasa către interfețele și elementele cele mai utilizate în dezvoltarea web.
Putem descărca Bootstrap și îl putem pune într-un director de pe site-ul nostru web sau îl putem folosi conectându-l la biblioteca dvs. online.
Bootstrap este un cadru open source și deschideți pentru o dezvoltare web mai rapidă și mai ușoară.
Căutând putem găsi multe contribuții din comunitatea CSS și componente personalizate și șabloane de proiectare pe care alți utilizatori le-au făcut și le fac disponibile, există multe componente pentru a crea bare de navigare, ferestre și ferestre pop-up modale, carusele de imagine, meniuri și multe altele, de asemenea ca pluginuri JavaScript și Jquery pentru a valida formulare și alte funcționalități

Tabelele și rândurile cu efecte

Bootstrap are stiluri și efecte CSS deja programate pe care le putem folosi, de exemplu, pentru a schimba culoarea rândurilor dintr-un tabel și când mouse-ul trece peste acesta.

Codul va fi următorul:

Tabel și rânduri cu efect
 

 
 
Vehicul
 
Sursă
 
Condiție
 
Preț
 

 

 

 
 
Fiat 500
 
Madrid
 
Folosit
 
9690€
 

 
 
Honda acord
 
Barcelona
 
Folosit
 
14500€
 

 
 
Renault laguna
 
Toledo
 
Folosit
 
2800€
 

 

 

Apoi vom crea un meniu cu submeniu folosind doar Bootstrap CSS:

MARI

Codul va fi următorul:

Meniu pe mai multe niveluri folosind Bootstrap Css
Administrator vânzări clienți 

Sistem
Utilizatori
Setări

Permisiuni
Servere

Server Vps A
Server Vps B


Consumul de resurse
Backup

Vă explicăm structura și clasele sale predefinite. Clasa definește dimensiunea site-ului găsit în mod implicit în Bootstrap.

 .container {width: 1170px; } 

Următoarele clase de rânduri oferă o marjă stângă și dreaptă pe întreaga pagină:

 .rând {; marginea-dreapta: -15px; } 

Clasa de meniu derulant vine deja cu Bootstrap și cu clasele de butoane btn btn-primare. Vom adăuga submeniul și clasele de nivel pentru a putea genera submeniul. Amintiți-vă că clasele au ierarhii, prin urmare, dacă numim aceeași clasă pe care o avem în Bootstrap și îi adăugăm un atribut, ultima declarație făcută prevalează.
Acesta este cazul în care adăugăm un atribut shift stânga, chiar dacă clasa este deja definită în bootstrap.min.css

 .dropdown-menu {left: 150px; } 

Popup CSS și jQuery cu conținut HTML
Vom folosi funcția popover care afișează un popup atunci când un link este plasat cu mouse-ul și variabila de conținut are html de afișat.
Vom lua tabelul anterior și vom adăuga o coloană pentru o fișă tehnică.
În fiecare link vom avea următoarea propoziție și apoi cu id vom invoca un script.

 
 

 
 
Vehicul
 
Sursă
 
Condiție
 
Preț
 
Fotografii
 

 

 

 
 
Fiat 500
 
Madrid
 
Folosit
 
9690€
 
Fișa cu date
 

 
 
Honda acord
 
Barcelona
 
Folosit
 
14500€
 
Fișa cu date
 

 

 

 

Dacă avem o listă largă, putem crea o funcție JQuery unde putem trimite conținut dinamic extras dintr-o bază de date.

Coloane și blocuri de pe pagină

Bootstrap se bazează pe o lățime de 1200 pixeli, împărțită în 12 blocuri care acoperă 99% din structura web, fiecare bloc acoperă 8,3333%, echivalent cu 100 pixeli și are și un spațiu de 1 pixel.
Întotdeauna combinația de blocuri din aceeași linie pentru a adăuga 12, de exemplu:
Două blocuri de 3 și unul de 6

Blocuri bootstrap
Col-md-3 bloc de 300 px.
Col-md-6 bloc de 600 px.
Col-md-3 bloc de 300 px.
800px bloc col-md-8.

Mai jos punem o dimensiune de bloc 8 care este de 800 pixeli:

Aceste blocuri sunt receptive, deoarece sunt configurate în Bootstrap css. Aici putem vedea o mostră a modului în care blocurile se adaptează la schimbarea ecranului unui dispozitiv mobil.

Cum să personalizați Bootstrap pentru a schimba stilurile și funcționalitatea

Pentru a crea stiluri și funcționalități care să fie compatibile cu Bootstrap, trebuie să o folosim ca orice altă bibliotecă css sau js, ca un alt cadru al proiectului, în acest caz va fi folosit pentru proiectare și funcționalitate în browserul utilizatorului. Ar trebui să evităm reformarea bibliotecilor originale, dar să le ancorăm pe a noastră, așa că atunci când dezvoltatorii Bootstrap lansează o actualizare, nu vom avea nicio problemă să încorporăm noul dacă păstrăm modificările noastre separate.
Pentru a ne defini propriile foi de stil, trebuie să creăm un nou fișier de stil CSS, pentru a defini modificările noastre fără a afecta css-ul original. Să ne amintim ierarhia, de exemplu.
Dacă în Bootstrap css bootstrap.min.css

 .col-md-3 {lățime: 25%; } 

Și vrem să aibă un chenar, apoi într-un fișier separat, styles.css, putem declara:

 .borderojo {border: 1px roșu continuu} 

Apoi pe pagină invocăm ambele fișiere

În bloc îl aplicăm după cum urmează:

Col-md-3 bloc de 300 px.

Acest lucru ar echivala cu a declara astfel:

 col-md-3 {lățime: 25%; chenar: 1px roșu continuu; } 

Acum, dacă, dintr-un anumit motiv, a avut două afirmații similare, să presupunem

 .borderojo {border: 1px roșu continuu; } .clientblock {border: 1px albastru continuu; }
Col-md-3 bloc de 300 px.

Cine predomină este sentința care a fost declarată ultima. Prin urmare, blocul va avea o margine albastră.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv