Ultima actualizare: 31.10.2015
La folosind Bootstrap Este foarte convenabil să poziționați interfața sub formă de tabel sau grilă folosind rânduri și coloane. Deci, dacă ne uităm în browser la vizualizarea standard Index.cshtml, care este implicită, vom vedea o poziționare similară: elementele de sub titlu sunt aranjate în trei coloane și alcătuiesc un rând:
Dacă deschidem codul de vizualizare, putem vedea că sunt folosite clasele de bootstrap:
Noțiuni de bază
.............
Obțineți mai multe biblioteci
.............
Web hosting
.............
Clasa de rânduri specifică aranjarea blocurilor individuale ca un singur rând. Un rând în Bootstrap poate avea până la 12 coloane. Pot exista oricâte rânduri doriți, dar în în acest caz, avem o linie.
Pentru a crea o coloană cu un singur rând, utilizați clasa col-md-4. col, după cum sugerează și numele, înseamnă coloană.
Urmează md - identificatorul dispozitivului. După cum am văzut în subiectul anterior, bootstrap împarte toate dispozitivele în mod condiționat în patru grupuri, în funcție de lățimea ecranului. md, în special, corespunde dispozitivelor de dimensiuni medii (adică celor care au 992 pixeli lățime sau mai mare). Și numărul 4 indică câte unități convenționale din linie va ocupa acest bloc. Astfel, se dovedește că clasa col-md-4 înseamnă că acest bloc va ocupa 4 unități convenționale din 12 într-o linie, adică o treime din lățimea ecranului unui dispozitiv cu o lățime a ecranului de 992 pixeli sau mai mult. .
Și din moment ce avem patru grupe, fiecare grupă are propriile sale clase. De exemplu, pentru dispozitive foarte mici cu ecrane mai mici de 768 de pixeli (adică telefoane mobile), o clasă similară ar putea fi col-xs-4 .
Toate tipurile de clase:
col-xs-* : pentru dispozitive cu lățimea ecranului mai mică de 768 pixeli
col-sm-* : pentru dispozitive cu o lățime a ecranului de 768 pixeli și mai mult
col-md-* : pentru dispozitive cu lățimea ecranului de 992 pixeli și mai mult
col-lg-* : pentru dispozitive cu o lățime a ecranului de 1200 pixeli și mai mult
Deși chiar și pe dispozitive mobile un bloc cu clasa col-md-4 va arăta destul de bine, dar putem seta două clase simultan pentru a rafina și mai mult afișajul pe diferite dispozitive, de exemplu:
Deși în vizualizarea implicită Index.cshtml toate cele trei blocuri au o lățime relativă de 4 unități, făcând un total de 12 unități, putem specifica orice altă lățime prin poziționarea lor la discreția noastră. De exemplu:
Indentări
Clasele speciale col-md(sm|lg)-offset-* vă permit să setați decalajul relativ la blocul din stânga sau începutul liniei în unități arbitrare. De exemplu, avem această linie:
Blocul din stânga
................
Blocul din dreapta
................
Clasa col-md-offset-4 va compensa blocul din dreapta cu 4 unități la dreapta:
Câteva exemple de utilizare a offset-ului:
Ordinea coloanelor
Folosind clasele col-md(sm|lg)-push-* și col-md(sm|lg)-pull-* putem redefini ordinea blocurilor într-un rând. De exemplu, clasa col-md-push-4 mută blocul cu patru unități la dreapta poziției sale curente. În schimb, clasa col-md-pull-4 mută blocul la stânga poziției curente. Deci, am putea rescrie exemplul de offset anterior după cum urmează:
Blocul din stânga
................
Blocul din dreapta
................
Și am avea același efect. Dar putem și reordona complet ordinea blocurilor:
Blocul din stânga
................
Blocul din dreapta
................
Acum blocul din dreapta se va muta la stânga cu patru unități, iar blocul din stânga se va deplasa la dreapta cu 8 unități:
Astfel, folosind clasa de rând și clasele de coloane, putem specifica aranjarea generală a elementelor, iar capacitatea de răspuns a bootstrap asigură că o astfel de grilă de elemente va arăta destul de normal pe orice dispozitiv. Acum să ne uităm la câteva dintre componentele pe care ni le oferă Bootstrap.
Variabila!COL1 iMacros indică selectarea primei coloane dintr-un rând dat, utilizată la citirea datelor. Schimbați 1 cu orice alt număr, în funcție de coloana pe care trebuie să o extrageți din fișier. Chiar dacă nu știți câte coloane de coloane aveți în fișier, adică datele individuale sunt pe linii diferite, atunci cu siguranță ar trebui să utilizați cel puțin!COL1.
Lucrează în:
Orice număr întreg poate fi folosit în loc de n, număr pozitiv mai mare decât 0 și mai mic decât!DATASOURCE_COLUMNS (număr de coloane din fișier).
A stabilit:
× Variabilă internă
✓ Comanda SET
„Variabilă internă” înseamnă că stabilește însăși valoarea unei variabile date în timpul execuției macro-ului. înseamnă că utilizatorul poate seta această valoare folosind comanda atunci când editează .
Exemplu:
În exemplu, fișierul example.csv conține „First Name” în prima (preluat folosind variabila iMacros!COL1) și „Last Name” în a doua coloană (!COL2). Pe site dorim să inserăm aceste valori în câmpurile corespunzătoare.
A STABILIT! Exemplu DATASOURCE. csv A STABILIT! DATASOURCE_LINE ( ( ! LOOP ) ) URL GOTO = http : //www.some_input.com/enter_name.html TAG POS = 1 TYPE = INTRARE : TEXT FORM = form1 ATTR = NUME : prenume CONȚINUT = ( ( ! COL1 ) ) |
9 răspunsuri
Actualizat 2018...
Net Bootstrap 3 are 4 niveluri (sau „puncte de întrerupere”)...
- Foarte mic (pentru smartphone-uri.col-xs-*)
- Mic (pentru tablete.col-sm-*)
- Mediu (pentru laptop-uri.col-md-*)
- Mare (pentru laptop-uri/desktop-uri.col-lg-*).
Aceste dimensiuni de plasă vă permit să controlați modul în care plasa se comportă pe diferite lățimi. Diferitele niveluri sunt determinate de interogări CSS.
Deci, în grila cu 12 coloane a lui Bootstrap...
col-sm-3 are o lățime de 3 din 12 coloane (25%) pe un tipic mic lățimea dispozitivului (> 768 pixeli)
col-md-3 are o lățime de 3 din 12 coloane (25%) la lățimea tipică purtător(>992 pixeli)
Nivelul mai mic (xs, sm sau md) definește și dimensiunea pentru lățimi mai mari ale ecranului. Deci, pentru o coloană de aceeași dimensiune la toate nivelurile, trebuie doar să setați lățimea la cea mai mică fereastră de vizualizare...
Implicat niveluri mai mari . Deoarece col-sm-3 înseamnă 3 unități pe sm-and-up , cu excepția cazului în care este suprascris de un nivel mai mare care utilizează o dimensiune diferită.
xs (implicit) > suprascris de sm > suprascris de md > suprascris de lg
Combinați clasele pentru a utiliza modificarea lățimii coloanelor pentru diferite dimensiuni de grilă. Acest lucru creează un aspect receptiv.
Grilele sm , md și lg se vor „stivui” vertical pe ecranele/porturile de vizualizare mai mici de 768 de pixeli. Grila xs este plasată aici. Coloanele care folosesc col-xs-* nu se vor stivui vertical și se vor micșora pe cele mai mici ecrane.
Redimensionați browserul folosind această demonstrație și veți vedea efectele de scalare a grilei.
ÎN Bootstrap 4 Există o nouă dimensiune -xl-, vezi această demonstrație. De asemenea a fost eliminat de -xs- infix deci cele mai mici coloane sunt pur si simplu col-1 , col-2 .. col-12 etc.
col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
De asemenea, acest articol explică mai multe despre grila Bootstrap
Cred că aspectul confuz al acestui lucru este că BootStrap 3 este sistem mobil cu sensibilitate ridicată și nu reușește să explice modul în care acest lucru afectează ierarhia col-xx-n din acea parte a documentației Bootstrap. Acest lucru vă face să vă întrebați ce se întâmplă pe dispozitivele mai mici dacă selectați o valoare pentru dispozitivele mai mari și să vă întrebați dacă trebuie să specificați mai multe valori. (Tu nu)
Aș încerca să clarific acest lucru afirmând că... Tipurile de cereale mai mici (xs, sm) încearcă să păstreze aspectul aspectului pe ecrane mai mici, în timp ce tipurile de cereale mai mari (md, lg) se vor afișa corect doar pe ecrane. ecrane mari, dar va împacheta coloanele pe dispozitive mai mici. Valorile date în exemplele anterioare se referă la pragul la care unitatea de pornire își degradează aspectul pentru a se potrivi cu starea ecranului disponibilă.
În practică, aceasta înseamnă că, dacă creați coloane col-xs-n, atunci acestea își vor păstra aspectul corect chiar și pe ecrane foarte mici, până când fereastra scade la o dimensiune atât de restrictivă încât pagina nu poate fi afișată corect. înseamnă că dispozitivele cu o lățime de 768 de pixeli sau mai puțin ar trebui să arate tabelul așa cum l-ai proiectat, și nu într-o formă degradată (formă cu o singură coloană sau ambalată). Evident, acest lucru depinde în continuare de conținutul coloanelor și care este scopul. Dacă o pagină încearcă să afișeze mai multe coloane de date mari, una lângă alta ecran mic, atunci coloanele vor ieși în mod natural îngrozitor dacă nu țineți cont de acest lucru. Prin urmare, în funcție de datele din coloane, puteți determina punctul în care aspectul va fi utilizat pentru a afișa în mod adecvat conținutul.
De exemplu. Dacă pagina dvs. conține trei coloane de coloane col-sm-n, acestea vor pune coloanele în rânduri atunci când lățimea paginii scade sub 992 px. Aceasta înseamnă că datele sunt încă vizibile, dar necesită defilare verticală. Dacă nu doriți ca aspectul dvs. să se degradeze, alegeți xs (atâta timp cât datele dvs. pot fi afișate în mod adecvat pe un dispozitiv cu mai multe rezolutie scazuta pe trei coloane)
Dacă pozitie orizontala datele sunt importante, ar trebui să încercați să alegeți mai multe valori scăzute granularitate pentru a menține caracterul vizual. Dacă poziția este mai puțin importantă, dar pagina trebuie să fie vizibilă pe toate dispozitivele, ar trebui utilizată o valoare mai mare.
Dacă alegeți col-lg-n, coloanele se vor afișa corect până când lățimea ecranului scade sub pragul xs 1200px.
Col-XY înseamnă dimensiunea ecranului X și mai sus, întindeți acest element pentru a umple coloanele Y.
Bootstrap oferă o grilă cu 12 coloane pe .row , deci Y = 3 înseamnă lățime = 25%.
xs, sm, md, lg - dimensiuni pentru smartphone, tabletă, laptop, respectiv desktop.
Punctul de a specifica diferite lățimi pe diferite dimensiuni de ecran vă permite să măriți lucrurile pe ecrane mai mici.
exemplu
Valoare: 50% lățime pe desktop-uri, 100% lățime pe dispozitive mobile, tablete și laptopuri.
Bună ziua, dragi cititori ai site-ului blogului. În prima parte a articolului despre ne-am familiarizat cu capacitățile acestui cadru, am aflat despre ce design receptivși de ce este atât de important în era noastră de creștere pe scară largă a popularității diverselor gadgeturi mobile. Acolo am examinat, de asemenea, în detaliu problemele conectării Bootstrap la o pagină HTML (conectarea fișierelor de stil, script-uri și biblioteca jQuery).
Articolul de astăzi este despre sistemul de grile utilizat în Bootstrap 3. Veți afla ce dimensiuni de grile pot fi utilizate, cum se vor comporta pe dispozitive cu diferite dimensiuni de ecran și cum să creați singur rânduri și celule pe baza uneia sau mai multor grile. Toate acestea vor fi spuse cu exemple, care, sper, vor îmbunătăți percepția.
Cum funcționează sistemul de grilă în Bootstrap 3
Bootstrap 3 vine cu sistem grilă cu douăsprezece coloane, care este conceput în principal pentru dispozitive mobile. Acestea. este conceput în primul rând pentru ecrane mici și în al doilea rând pentru ecrane late. ÎN versiune noua Acest cadru are patru dimensiuni de grilă. Toate aceste informații pot fi studiate în detaliu pe site-ul oficial GetBootstrap.com accesând fila „CSS” din meniul de susși selectând elementul „Sistem grilă” din dreapta.
Acolo vei primi explicatie completa principiile de funcționare a sistemului, interogări media conexe etc. Acea serie de elemente HTML (de exemplu, anunțuri de articole despre pagina principala) pe care doriți să îl poziționați în grilă va trebui să fie înconjurat de un container (de exemplu, închis în Etichete div) și scrieți un class.row pentru el (eticheta de deschidere în acest caz va arăta ca
Ei bine, puteți distribui elementele în sine într-un rând într-unul sau mai multe tipuri de grile deodată, specificând atributul clasei cu o valoare, de exemplu, .col-xs-digit (în acest caz, doar o grilă ultra-mică este folosit).
De exemplu, dacă trebuie să obțineți trei coloane de dimensiune egală ca rezultat, atunci trebuie să împărțiți 12 (dimensiunea grilei din Bootstrap 3) la 3 (numărul necesar de coloane). Mijloace pentru toată lumea element HTMLîn interiorul rândului (acestea pot fi din nou containere Div) va trebui să înregistrați aceleași clase -
Chiar mai jos în zona „Opțiuni grilă” veți găsi o explicație a celor de mai sus patru dimensiuni de plasă Bootstrap modern.
- Mai întâi vine o grilă foarte mică (în coloana „Dispozitive foarte mici”), concepută pentru dispozitive mobile, a cărei dimensiune a ecranului este mai mică de 768 de pixeli în lățime (citiți despre aceasta la link-ul furnizat). Va fi întotdeauna orizontal la orice dimensiune a ecranului și voi încerca să explic ce este puțin mai jos. Vă rugăm să rețineți că prefixul de clasă pentru acest tip de plasă va fi doar col-xs, ca în exemplul discutat mai sus.
- Dacă dimensiunea ecranului dispozitivului variază de la 768 la 992 de pixeli (în prezent acestea sunt cel mai adesea tablete), atunci grila Bootstrap, concepută pentru dispozitive mici, este potrivită pentru acestea. Se numește mic, iar prefixele de clasă sunt folosite pentru a-l specifica col-sm.
- Pentru dispozitivele cu o dimensiune a ecranului mai mare de 992, dar mai mică de 1200 (mai ales monitoare desktop sau laptop), există o grilă pentru dispozitivele medii. Se numește mediu, iar prefixul său de clasă este col-md.
- Ei bine, pentru monitoare cu o lățime de peste 1200 de pixeli, există cea mai mare grilă cu un prefix de clasă col-lg.
Ultimele trei grile vor fi orizontale numai dacă lățimea ecranului este mai mare decât punctul în care are loc „colapsul”. De exemplu, pentru o grilă mare pe ecrane mai mici de 1200 de pixeli, aceasta nu va mai fi orizontală și se va transforma în verticală. Pagina de pe site-ul web oficial GetBootstrap.com la care ne uităm în prezent oferă exemple și explicații în acest sens. Totuși, în opinia mea, totul acolo este oarecum confuz și complicat.
Un exemplu despre modul în care sistemul de grilă Bootstrap 3 funcționează la diferite lățimi de ecran
Voi încerca să explic toate acestea în exemplu terminat. Va trebui doar să copiați fișierul setka.html(Pentru a face acest lucru, selectați din meniul contextual elementul „Salvați linkul ca...”). Dacă deschideți direct acest fișier în browser (făcând clic pe linkul furnizat cu butonul stâng al mouse-ului), atunci nimic nu va funcționa, deoarece framework-ul Bootstrap nu se va conecta.
Plasați fișierul setka.html descărcat în folderul Bootstrap, despre care am vorbit în . Ar trebui să fie la același nivel cu fișierul index.html pe care l-am creat mai devreme.
Acum deschideți acest fișier setka.html în orice browser convenabil pentru dvs. și faceți câteva experimente cu dimensiunea ferestrei browserului pentru a vedea Bootstrap 3 în acțiune și pentru a înțelege cum funcționează sistemul de grilă. Care? Voi explica acum.
Lățimea ecranului monitorului meu este de 1280 de pixeli, ceea ce este mai mare decât punctul de rupere de 1200 de pixeli setat pentru grila mare. Ce vedem ca rezultat? Ceva de genul:
Iată cinci exemple de layout-uri de site-uri web construite pe care tipuri diferite grile:
- Primul rând este descris folosind toate cele patru sisteme de grilă disponibile pe acest momentîn Bootstrap. În funcție de rezoluția ecranului dispozitivului pe care este vizualizat aspectul, acolo va fi afișat numele grilei care este utilizată în fiecare dintre celule (acum deasupra primului rând scrie că este utilizată o grilă mare, iar în celulele „cl-lg” este prefixul clasei de grilă mare) . Pe măsură ce lățimea ecranului scade, aceste etichete se vor schimba.
- În rândurile rămase situate mai jos, se folosește un singur sistem de dimensiune a grilei - foarte mic, mic, mediu și mare (în această ordine).
În acest fel putem observa și compara modul în care aceste grile Bootstrap 3 funcționează împreună și modul în care funcționează individual (folosind un singur tip). Deoarece Când am făcut captura de ecran anterioară, browserul meu a fost maximizat pentru a umple întregul ecran (mai mult de 1200 de pixeli lățime), apoi toate cele cinci exemple de aspect al site-ului sunt implementate orizontal (coloanele sunt situate una lângă cealaltă pe lățimea ecranului). ).
Acum, să restrângem puțin dimensiunea ferestrei browserului, astfel încât să putem observa defalcarea (colapsul) care a avut loc.
Textul de deasupra rândului de sus și prefixele de clasă din celulele sale s-au schimbat (pentru aceasta s-au folosit clase de vizibilitate, despre care vom vorbi mai târziu). Grila din mijloc este acum utilizată și este încă afișată pe orizontală. În același timp, rândul cel mai de jos (care ilustrează utilizarea numai plasă grosieră) pliat vertical, adică blocurile adiacente nu mai sunt afișate unul lângă celălalt în lățime, ci unul sub celălalt (în înălțime).
Se pare că o grilă mare, în absența oricărei influențe externe, se comportă exact în acest fel - se pliază vertical pe toate dispozitivele a căror dimensiune a ecranului este mai mică de 1200 de pixeli în lățime. Cu toate acestea, toate celelalte grile utilizate în grila exemplu sunt afișate orizontal. Primul rând folosește o combinație de grile, așa că acum este controlat de sistemul de grilă medie (sistemul mare nu mai are efect).
Să reducem încă o dată lățimea ferestrei browserului astfel încât să devină. O altă defecțiune va avea loc:
Acum (pe baza dimensiunii ecranului) lucrăm cu o grilă mică. În consecință, nu numai grila mare, ci și cea medie s-au pliat vertical. Ei bine, în primul rând, unde se folosește o combinație de grile, totul este acum controlat de sistemul de grilă mică al Bootstrap. În același timp, în fișierul setka.html se modifică și distribuția coloanelor din acest prim rând, ceea ce nu este deloc necesar, dar acest lucru se poate face pentru a satisface unele dintre nevoile dvs. în ceea ce privește aspectul (și „unu-doi ”, fără nicio problemă).
Continuăm să reducem lățimea ferestrei browser la valori. Are loc o altă defecțiune:
Ca rezultat, nu numai grilele mari și medii rulează vertical pe pagină, ci și grila mică li sa alăturat. Singurul o grilă foarte mică a rămas orizontală, care rămâne așa (cum tocmai am văzut) în orice împrejurare. Chiar dacă restrângeți pagina la o lățime foarte mică, grila foarte mică nu se va transforma într-o grilă verticală (chiar și atunci când conținutul nu se va încadra în celule).
Acest exemplu (fișier setka.html) este făcut exact. Vom vorbi în detaliu despre cum funcționează totul acolo. Dar deocamdată vreau să vă atrag atenția doar asupra unor nuanțe pe care le puteți observa în codul sursă al fișierului setka.html.
Explicații pentru exemplul nostru de cod sursă
În partea de sus folosind stiluri adăugate pentru design vizual layout-uri (indenturi, culori ale grilei etc.) care nu au nicio semnificație specială. Dacă defilezi sursă jos, veți observa acest bloc:
lg O grilă mare este utilizată pentru ecranele mai largi de 1200px.
md Utilizează grila din mijloc pentru ecrane mai mici de 1200 px, dar mai mari de 992 px.
sm Utilizează o grilă mică pentru ecrane mai mici de 992 px, dar mai mari de 768 px.
xs Utilizează o grilă ultra-mică pentru dimensiunile ecranului mai mici de 768 px, care rămâne întotdeauna orizontală.
Există patru containere aici care sunt alocate diferite clase(Citește despre). Acestea vă permit să afișați conținut specific în funcție de interogările media care se potrivesc diferite dimensiuni grile Cum functioneaza? Toate cele patru anteturi sunt încărcate în browser (dacă vă uitați la codul sursă), dar numai un antet este afișat în funcție de rezoluția curentă a ecranului sau de dimensiunea ferestrei browserului.
Acest grilă principală, unde toate cele patru sisteme de grilă sunt combinate (puteți vedea acest lucru prin atributele celulei precum class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , care listează prefixele de clasă ale tuturor celor patru grile) . Rândul în sine, așa cum am menționat mai sus, este definit prin plasarea tuturor elementelor sale constitutive într-un container cu class = "row" (în exemplul nostru, acesta este un container bazat pe div).
Vă rugăm să rețineți că grila noastră principală este formată din trei celule (coloane) și dacă adunați toate numerele care sunt atribuite fiecărei coloane, de exemplu, pentru prefixele grilei Bootstrap ultra-mice (col-xs), veți va obține un total de 12. Atunci același lucru va fi valabil și pentru numerele după prefixele tuturor celorlalte sisteme. Acest lucru este de înțeles, deoarece acest cadru, așa cum sa menționat mai sus, are o structură de 12 coloane, adică pe orizontală, tot spațiul disponibil pentru aspect este împărțit în douăsprezece coloane de lățime egală(invizibile pe site - sunt ca celulele din caietele școlare).
Ei bine, folosind numerele de după prefixele clasei, pur și simplu setați proporțiile pentru fiecare dintre celule (coloane reale) ale aspectului dvs. Acestea. proporțiile ar putea fi, de exemplu, astfel:
Deloc, puteți utiliza unul, două, trei sau toate cele patru sisteme de rețeaîntr-un singur aspect (rând). Totul depinde de preferințele dvs. de design și de ceea ce încercați să obțineți din pagina dvs. web (cum ar trebui să arate la diferite rezoluții ale ecranului). Site-ul oficial oferă un exemplu:
Crearea de rânduri și celule utilizând clasele Bootstrap
Acum să creăm pentru o mai bună înțelegere Pagina HTML, amintește oarecum pagina web reala(cu un antet, text și conținut grafic, precum și un subsol) și aranjați-l folosind sistemul de grilă Bootstrap 3.
Mai exact, voi crea singur șablonul și vă voi oferi doar, prin analogie cu exemplul anterior, să descărcați fișierul sait.html(pentru aceasta, selectați elementul „Salvare ca...” din meniul contextual) pentru a putea adăuga la acest „pește” mai târziu. clasele necesare bootstrap. De asemenea, va trebui să fie plasat în folderul Bootstrap la același nivel cu fișierul index.html pe care l-am creat în primul articol (și setka.html, cu care am lucrat puțin mai sus).
Dacă te uiți la codul sursă al fișierului sait.html, vei vedea că acesta include deja Bootstrap și jquery și, de asemenea, adaugă conținut pentru simulare aspect pagina web medie. Da, veți avea nevoie și de un folder cu imaginile folosite pe această pagină. Îl poți descărca de aici - img.zip. Doar dezarhivați arhiva și plasați folderul img (asigurați-vă că conține fișiere imagine și nu alt dosar img) în folderul Bootstrap la același nivel cu fișierul sait.html. Structura va arăta astfel:
Acum, (din folderul Bootstrap) în browser, veți vedea pagina web pe care am folosit-o ca exemplu. Ceea ce este izbitor este că toate blocurile de pe pagină sunt situate unul sub celălalt, iar acest lucru interferează foarte mult cu percepția vizuală corectă a informațiilor. Ar fi logic să le plasăm în coloane și astfel încât atunci când dimensiunea ecranului scade, designul „răspunde” la aceasta, schimbând numărul de coloane pentru a crea ușurință de vizualizare pe dispozitive cu lățimi diferite ale zonei vizibile.
În original cod HTML Am folosit fișierul sait.html pentru a afișa limitele rândurilor (rândurilor) propuse de mine, pentru care vom configura afișarea coloanelor folosind un fel de sistem de grilă Bootstrap. Există doar patru rânduri (sunt numerotate în captura de ecran de mai sus) - antet (antet cu numele și sigla site-ului), titlul paginii și descrierea, partea de conținut (conținutul principal constând din anunțuri a patru articole) și subsol.
Acum va trebui să adăugăm markup Bootstrap la fișierul sait.html, care. Pentru a crea rânduri, după cum vă amintiți, va fi suficient să includeți tot conținutul său într-un container (cel mai adesea acestea sunt etichete Div, deși pot fi altele) și să scrieți o clasă în el class="rând". Pentru primul rând va arăta astfel:
site-ul web
Același lucru trebuie făcut pentru toate celelalte rânduri (rânduri) - puneți o etichetă de deschidere
Utilizarea diferitelor grile pentru a crea coloane de conținut la diferite lățimi de ecran
Acum hai să hai sa incepem sa formam celuleîn acele linii (rânduri) în care are sens să faci asta. Ar fi destul de logic să plasați anunțurile articolului (de pe al treilea rând) în patru coloane, iar atunci când reduceți lățimea ecranului, lăsați aceste patru coloane să fie convertite în două. Cum să o facă? Să aruncăm o privire.
Deci, în Bootstrap 3 există o grilă cu 12 coloane, despre care am vorbit mai sus. Deoarece am decis să facem patru coloane cu anunțuri, ar fi logic să le facem egale ca lățime, ceea ce înseamnă că fiecare dintre coloane va avea trei celule (celule) lățime în sistemul nostru de grile invizibile (indiferent de ce dimensiune grilă alegem - ultra -mic, mic, mediu sau mare).
Ce plasă ar trebui să aleg pentru job? Să luăm mai întâi media, ca opțiune de compromis. În acest caz, va trebui să adăugați clasa „col-md-3” în containerele tuturor celor patru celule -
După salvarea modificărilor pe care le-ați făcut, veți vedea că pagina noastră web a căpătat un aspect mult mai utilizabil:
Adevărat, atunci când fereastra browserului este redusă la lățimea punctului de rupere mai mic (în cazul grilei medii pe care o folosim, aceasta va fi de 992 de pixeli), toate anunțurile se vor alinia din nou într-o coloană, ceea ce nu este bine, deoarece utilizabilitatea în acest caz este redusă (o rezoluție de aproape 1000 de pixeli permite aranjarea mai densă a informațiilor). Pentru a corecta această situație puteți adăugați o altă plasă din arsenalul Bootstrap pentru aceleași celule cu anunțuri. Cum să o facă? Să aruncăm o privire.
Să folosim prefixele „col-xs-6” la numele clasei din fiecare celulă de anunț (rezultatul va fi o clasă compusă class="col-md-3 col-sm-6"). Va arăta astfel (folosind exemplul unei celule):
Google AdWords - crearea de grupuri
Textul anunțului.
După cum puteți vedea, aici am încălcat regula recent anunțată că numerele de după prefixele unei grile din toate celulele ar trebui să adună până la 12. Am obținut 24 (de patru ori șase). Dar am făcut acest lucru intenționat pentru a obține rezultatul dorit - pentru a obține două coloane în loc de patru atunci când trecem de punctul de rupere pentru sistemul mediu de grilă Bootstrap (acesta este de 992 de pixeli). Acestea. Celulele vor fi amplasate pe două rânduri, câte două în fiecare:
Deoarece am ales un sistem de grilă ultra-mic, apoi când reducem și mai mult lățimea ferestrei browserului aranjare verticală blocurile cu anunțuri unul sub celălalt (așezate într-o coloană) nu se vor întâmpla, deoarece acest sistem rămâne întotdeauna orizontal.
Dacă doriți ca patru coloane să se transforme în două pe măsură ce lățimea ecranului scade și apoi într-o singură coloană, atunci ar trebui să utilizați un sistem de grilă mică în loc de „col-xs-6” folosind "col-sm-6":
Yandex Direct - elementele de bază ale creării unei campanii
Apoi, când reduceți lățimea ferestrei browser sub 768 de pixeli, veți vedea o defalcare în care două coloane cu anunțuri sunt convertite într-una singură. Doar experimentați și simțiți diferența.
Personalizarea antetului unei pagini web folosind Bootstrap 3
Să mai experimentăm și să încercăm, în care există în esență două celule potențiale - numele site-ului cu o descriere și, de asemenea, sigla. De fapt, îi vom poziționa. Să folosim o grilă mai mare de data aceasta cu "col-lg-6" a face două coloane egale.
site-ul web
Totul despre crearea de site-uri web, bloguri, forumuri, magazine online, promovarea lor în motoarele de căutare și câștigarea de bani pe site
Adevărat, atunci când utilizați o plasă mare, defalcarea are loc destul de rezoluții mai mari ecran (fereastra browserului, în cazul nostru, pentru că acolo simulăm dispozitive cu lățimi diferite de ecran). După care celulele sunt pliate vertical. Pentru a evita acest lucru, noi să adăugăm o altă grilă Bootstrap 3 pentru primul rând. Cred că un sistem de grilă mică (prefixul de clasă col-sm) ar fi potrivit. Apoi codul va arăta cam așa:
site-ul web
Totul despre crearea de site-uri web, bloguri, forumuri, magazine online, promovarea lor în motoarele de căutare și câștigarea de bani pe site
Cu toate acestea, celulele cu numele site-ului și logo-ul nu am făcut la fel pentru grila mică, deoarece logo-ul este semnificativ mai îngust (în sensul de îngust) decât numele cu descriere. Cu o lățime mai mică a ecranului, nu ar fi logic să le aloci celule egale. De aceea am făcut prima coloană cu numele și descrierea site-ului când am activat de două ori sistemul de grilă mică al Bootstrap mai multe coloane cu logo.
Ca urmare, atunci când fereastra browserului este redusă, aceste celule se vor apropia până la punctul de rupere pentru sistemul de grilă Bootstrap mic, care va avea loc atunci când lățimea este mai mică de 768 de pixeli, iar apoi ambele celule vor fi situate una sub cealaltă. .
Probabil ați observat că textul paginii se lipește de marginea din stânga a ecranului, provocând . Puteți să-l adăugați la body tag pentru a corecta această situație, ceea ce vă va permite. Este posibil să rezolvi totul? mijloace standard Bootstrap 3.
Pentru a face acest lucru, va trebui să împachetați întregul conținut al paginii web (totul conținut în etichetele Body) într-un container Div cu clasa cu același nume - De asemenea, puteți vedea că imaginile anunțului se suprapun unele pe altele pe măsură ce lățimea ecranului scade. Cert este că sunt încă „neresponsive”, dar le vom face astfel în următoarele articole din această secțiune. De asemenea, vom continua să analizăm cum să lucrăm cu sistemul de grilă Bootstrap 3, să învățăm cum să proiectăm butoane, tabele, Formulare HTML, creați meniuri derulante, navigare și multe altele. Prin urmare, nu treceți și rămâneți la curent cu noile publicații. De continuat >>> (Puteți să vă abonați la newsletter pentru a nu-l rata) Și iată continuarea: (dar tot te abonezi - vor fi mult mai interesante și mai utile). - [kɔl] n. m. 1080; lat. collum → cou I ♦ 1 ♦ Vx Cou. Mod. Loc. Se hausser, se pousser du col: se faire valoir, prendre de grands airs. „Elle s en croit.” Il y a sa mère aussi, qui se pousse du col" (Sartre). 2 ♦ Partie étroite, rétrécie (d… … Encyclopédie Universelle col- col·po·scope; col·po·stat; col·pot·o·my; col·ter; col·ub·ber; col·u·bri·na; col·u·bri·nae; col·u·lus; col·um·ba·ceous; columbar; col · um · bary; col·um·batz; col·um·bel·la; col·um·bel·li·dae; col·um·bif·er·ous; col·u·mel·la; col · u · mel · lar;… … silabe engleze col- COL. s. m. La partie du corps qui joint la teste aux espaules, la prononciation ordinaire dans la pluspart des phrases, c est Cou. Long cou. grand cou. gros cou. le col court. le cou, ou le col tors. mal de cou, ou mal au cou. mouchoir de col, ou… Dictionnaire de l'Académie française col- COL, coluri, s.n. (anat.) Parte mai îngustă, mai strâmtă a unui organ sau a unui os. – Din fr. col. Trimis de IoanSoleriu, 28.06.2004. Sursa: DEX 98 COL s. (anat.) col uterin = col uterin; col vezical = cervix. Trimis de siveco, 08.05.2004. Sursa:… …Dicționar Roman col- se poate referi la: Conținut 1 Lucruri 2 Locuri 3 Limbi 4 Abrevieri 5 Grupuri … Wikipedia col- COL. s. m. Voyez Cou, quant à la partie du corps qui joint la tête aux épaules.Col. s. m. Terme dont on se sert dans différentes phrases par analogie à cette partie du corps humain dont on vient de parler. [b]f♛/b] On appelle Le col de la vessie … Dictionnaire de l'Académie Française 1798 Çöl Dəllək- Municipiul... Wikipedia col-- → con col élément, du lat. cum. V. co et com. ⇒COL(I) , COLO(N) , (COL , COLI , COLO , COLON), élément préf. Premier element de compos. correspondant au subst. côlon et entrant în formarea de termeni aparținând domeniului medical. A. Sur… … Encyclopédie Universelle col.- col. col. abreviere pentru coloana * * * col. UK Substantiv SUA [C] (plural col.) ABREVIERE SCRISĂ pentru coloană: un rând vertical de cuvinte sau numere: »Vezi Evening Advertiser, pagina 2, col. 1. „Tabelul arată angajarea absolvenților alături de... ... Condiții financiare și de afaceri col.- col. 〈Buchw.; Abk. für lat.〉 columna (Spalte) * * * col. = columna(Spalte). * * * Col., Abkürzung für den Bundesstaat Colorado, SUA. *** col. = columna (Spalte) ... Universal-Lexikon col- sustantivo femenino 1. Brassica oleracea. Planta crucífera comestible, de tallo grueso, hojas anchas, flores pequeñas, blancas o amarillas que se cultiva en los huertos: Prepara las coles con patatas muy bien. Locuciones 1. col de Bruselas… … Diccionario Salamanca de la Lengua EspañolaCărți
