Bootstrap Framework napredni razvoj web sučelja

U drugom vodiču objašnjen je uvod u Bootstrap korisnička sučelja, kao i vodič o tome kako osmisliti web projekt s Bootstrapom 2.0, u ovom ćemo preći na sučelja i elemente koji se najviše koriste u web razvoju.
Možemo preuzeti Bootstrap i staviti ga u direktorij na našoj web stranici ili ga koristiti povezivanjem s vašom mrežnom knjižnicom.
Bootstrap je okvir otvorenog koda i otvoren za brži i lakši web razvoj.
Pretražujući možemo pronaći mnoge doprinose css zajednice te prilagođene komponente i predloške dizajna koje su drugi korisnici učinili i učiniti dostupnima, postoji mnogo komponenti za stvaranje navigacijskih traka, modalnih prozora i skočnih prozora, rotirajućih slika, izbornika i mnogih drugih, kao i kao dodatke za JavaScript i Jquery za provjeru obrazaca i drugih funkcionalnosti

Tablice i retci s efektima

Bootstrap ima već programirane CSS stilove i efekte koje možemo koristiti, na primjer, za promjenu boje redaka u tablici i kada miš pređe preko nje.

Kôd će biti sljedeći:

Tablica i retci s učinkom
 

 
 
Vozilo
 
Izvor
 
Stanje
 
Cijena
 

 

 

 
 
Fiat 500
 
Madrid
 
Rabljeno
 
9690€
 

 
 
Honda akord
 
Barcelona
 
Rabljeno
 
14500€
 

 
 
Renault laguna
 
Toledo
 
Rabljeno
 
2800€
 

 

 

Zatim ćemo stvoriti izbornik s podizbornikom koristeći samo Bootstrap CSS:

POVEĆAJTE

Kôd će biti sljedeći:

Izbornik na više razina pomoću Css Bootstrapa
Administrator prodaje kupaca 

Sustav
Korisnici
Postavke

Dopuštenja
Poslužitelji

Vps poslužitelj A
Vps poslužitelj B


Potrošnja resursa
Sigurnosna kopija

Objašnjavamo strukturu i njezine unaprijed definirane klase. Klasa definira veličinu weba koja se prema zadanim postavkama nalazi u Bootstrapu.

 .kontejner {širina: 1170px; } 

Sljedeće klase redaka pružaju lijevu i desnu marginu na cijeloj stranici:

 .row {; margin -right: -15px; } 

Klasa padajućeg izbornika već dolazi s Bootstrapom i klasama gumba btn btn-primary. Dodati ćemo podizbornik i klase razina kako bismo mogli generirati podizbornik. Upamtite da klase imaju hijerarhije, stoga ako imenujemo istu klasu koju imamo u Bootstrapu i dodamo joj neki atribut, prevladava posljednja deklaracija.
Ovo je za slučaj kada dodamo atribut pomaka ulijevo iako je klasa već definirana u bootstrap.min.css

 .dropdown-menu {lijevo: 150px; } 

Css i jquery skočni prozor sa html sadržajem
Koristit ćemo skočnu funkciju koja prikazuje skočni prozor kada se veza zadrži mišem, a varijabla sadržaja ima html za prikaz.
Uzet ćemo prethodnu tablicu i dodati stupac za tehnički list.
U svakoj ćemo vezi imati sljedeću rečenicu, a zatim ćemo s ID -om pozvati skriptu.

 
 

 
 
Vozilo
 
Izvor
 
Stanje
 
Cijena
 
Fotografije
 

 

 

 
 
Fiat 500
 
Madrid
 
Rabljeno
 
9690€
 
Tehnički list
 

 
 
Honda akord
 
Barcelona
 
Rabljeno
 
14500€
 
Tehnički list
 

 

 

 

Ako imamo širok popis, možemo stvoriti funkciju JQuery na koju možemo poslati dinamički sadržaj, na primjer izdvojen iz baze podataka.

Stupci i blokovi na stranici

Bootstrap se temelji na širini od 1200 piksela, podijeljenoj u 12 blokova koji pokrivaju 99% strukture weba, svaki blok pokriva 8,3333%, što je ekvivalentno 100 piksela i također ima prostor od 1 piksela.
Uvijek kombinacijom blokova u istom retku dodajte 12, na primjer:
Dva bloka od 3 i jedan od 6

Bootstrap blokovi
Col-md-3 blok od 300px.
Col-md-6 blok od 600 piksela.
Col-md-3 blok od 300px.
800px col-md-8 blok.

Ispod stavljamo blok veličine 8 koji ima 800 piksela:

Ovi su blokovi osjetljivi jer su konfigurirani u Bootstrap css -u. Ovdje možemo vidjeti uzorak kako se blokovi prilagođavaju promjeni ekrana mobilnog uređaja.

Kako prilagoditi Bootstrap za promjenu stilova i funkcionalnosti

Kako bismo stvorili stilove i funkcionalnosti koji će biti kompatibilni s Bootstrapom, moramo ga koristiti kao i svaku drugu css ili js knjižnicu, kao još jedan okvir projekta, u ovom slučaju će se koristiti za dizajn i funkcionalnost u pregledniku korisnika. Trebali bismo izbjegavati reformiranje izvornih knjižnica, ali usidriti svoje, pa kad programeri Bootstrapa objave ažuriranje, nećemo imati problema s ugradnjom novih ako svoje promjene držimo odvojeno.
Da bismo definirali vlastite tablice stilova, moramo stvoriti novu datoteku stilova CSS -a kako bismo definirali naše promjene bez utjecaja na izvorni css. Sjetimo se hijerarhije, na primjer.
Ako je u Bootstrap css bootstrap.min.css

 .col-md-3 {širina: 25%; } 

I želimo da ima rub, a zatim u zasebnoj datoteci my styles.css možemo proglasiti:

 .borderojo {obrub: 1px puna crvena} 

Zatim na stranici pozivamo obje datoteke

U bloku ga primjenjujemo na sljedeći način:

Col-md-3 blok od 300px.

To bi bilo jednako objavljivanju na sljedeći način:

 col-md-3 {širina: 25%; obrub: 1px puna crvena; } 

Pretpostavimo da je iz nekog razloga imala dvije slične izjave

 .borderojo {obrub: 1px puna crvena; } .clientblock {border: 1px puna plava; }
Col-md-3 blok od 300px.

Prevladava posljednja rečenica. Stoga će blok imati plavi obrub.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod