În această lecție ne vom uita la elementele de bază ale Bootstrap (containere, rânduri, blocuri compuse din coloana Bootstrap) necesare pentru a crea o rețea de pagini web ale site-ului. Acest proces este unul dintre pașii de bază pentru crearea site-ului, acesta este cu dezvoltarea rețelei, vom începe să construim o interfață pagină web după design.
Principalele elemente ale platformei Twitter Bootstrap 3 pentru a crea o grilă a site-ului sunt:
- Containere (elemente div cu ".container" sau ".container-fluid" clasă);
- Rânduri (un element div ".row" clasa);
- Blocuri div. Bootstrap format din coloane (un element div cu un ".col - # - $" sau mai multe clase ".col - # - $").
Containere (elementele div cu ".container" sau ".container-fluid de" clasa)
Container este „fundația“ de la care începe să creați pagina web net. Pe Twitter containere Bootstrap sunt 2 tipuri de platforme:
Astfel, containerul este proiectat pentru a stabili o lățime a ochiurilor. În plus, se specifică faptul că marjele pozitive interne de la granița stânga și la dreapta la conținutul care este pus în ea. Valoarea este setată indentare egală 15px iar acest lucru se realizează datorită proprietăților CSS „padding-left: 15px“ și „padding-dreapta: 15px“.
Rânduri (un element div ".row" de clasă)
Rangurile pentru a crea o grilă este folosit doar pentru a le plasa în blocuri div. format din coloane Bootstrap (
Și acum uite, puteți plasa rândurile în orice celulă a grilei. Rânduri pot fi plasate într-un container și blocuri div. format din coloane Bootstrap.
De ce? Acest lucru este datorat faptului că blocurile de div. format din coloane Bootstrap au padding pozitive. Și dacă ei nu fac pentru cazul în care doriți, atunci ai aspectul greșit, adică în unele locuri de pe granița de grilă pentru conținutul va fi 30px, în alte locuri pot obține 45px etc. Pentru această serie ar trebui să fie utilizate pentru a preveni.
Rangurile - blochează div. care au externalități indentare negativă în stânga și dreapta egal 15px (margin-left: -15px și marja de-dreapta: -15px). Prin urmare, în cazul în care numărul aranjate într-un bloc, aceasta depășește limitele blocului din stânga și în dreapta 15px.
Ca rezultat, un număr plasat într-un recipient sau unitate de div, format din coloane Bootstrap va compensa padding pozitiva aceste elemente Bootstrap stânga și dreapta (padding-left: 15px și padding-dreapta: 15px) indentare negativ extern.
Blocuri div. format din coloane Bootstrap
Blocuri div. format din coloane Bootstrap sunt concepute pentru a crea celulele din grila. Astfel, orice celulă din grila poate fi împărțită în mai multe celule. Să ilustrăm acest punct un mic exemplu mai detaliat.
Etapele de creare a ochiurilor de plasă:
- Într-o primă etapă vom crea un container. În acest moment, grila constă dintr-o singură celulă;
- În a doua etapă împărțit celula la numărul necesar de celule (de exemplu, un capac, bloc la stânga, dreapta bloc, conținutul principal și subsolul paginii);
- În a treia etapă, de exemplu, putem rupe în continuare celula „subsolul paginii“ câteva celule. În mod similar, dacă este necesar, putem bate orice celulă a grilei.
În plus, trebuie să ne amintim că spargerea celula în mai multe celule, acestea trebuie să fie plasate într-un rând (cu elementul div cu clasa „.row“). Această cerință este obligatorie, deoarece blocuri compuse din coloane Bootstrap au marje pozitive interne de pe partea stângă și dreaptă 15 px, care trebuie să fie compensate. Dacă această condiție nu este îndeplinită, atunci ați rupt structura rețelei.
De asemenea, atunci când plasarea blocuri div. Bootstrap constând din coloane într-un rând trebuie să știți că într-o singură linie a unui număr este plasat exact 12 coloane Bootstrap. Ie blocuri care nu sunt plasate în primul rând, sunt aranjate în rândul următor, etc. Dar există un punct foarte important, care este legată de faptul că aceste unități nu înfășurați întotdeauna la următoarea linie a seriei. Acest lucru se datorează faptului. care blochează div. format din coloane Bootstrap sunt plutitoare (CSS "float: left" proprietate).
Să considerăm acest punct important în acest exemplu:
In imaginea prezentată mai sus arată că numărul de 1 rând conține 2 bloc (Block №1 și №2), suma coloanelor, care este de 12. în acest aspect „Block №3“ trebuie să fie localizat în a 2-a linie, dar într-o situație reală Ea nu se produce. Și pentru a repara rețea, există o clasă specială de „clearfix“ pe Twitter Bootstrap 3 platformă, care urmează să fie adăugate la bloc div goale. În continuare, bloc div cu clasa „clearfix“ ar trebui să fie plasate în fața blocului, care trebuie să înceapă cu un rând nou în rândul.
Pentru a crea un div bloc. Bootstrap format din coloane, este necesar să se adauge clasa „.col - # - $“, în cazul în care:
De exemplu:
bloc
- xs pe lățimea dispozitivului de 6 coloane Bootstrap, adică 50% din lățimea elementului mamă;
- sm pe dispozitiv lățime egală cu patru coloane Bootstrap, adică 33,33% din lățimea elementului mamă;
- md pe lățimea dispozitivului egală cu cele trei coloane Bootstrap, adică 25% din lățimea elementului mamă;
- lățimea dispozitivului lg egală cu două coloane Bootstrap, adică 16,67% din lățimea elementului mamă;
Exemplu de creare a unei pagini web a ochiurilor de plasă
Creați o rețea pentru o pagină web de pe platforma Bootstrap, constând dintr-un antet al site-ului, blocul de stânga, unitatea principală și subsolul site-ului.
Bună ziua, doar începe să se dezvolte și să ceară bootstrap pentru a ajuta cu câteva întrebări.
1. Există un aspect în cazul în care capacul de lățime 1920px și 1920px subsol largă, de asemenea. În imaginea de subsol și capac. Ea a spațiului de lucru 1000px site-ului. Cum de a face un aspect la o imagine în antet și subsol adaptat.
2. Am nevoie pentru a personaliza grila pe un site 1000px Bootstrap sau puteți utiliza o grilă standard (pentru a pune stânga și dreapta blocuri col lățime - * - 1, și de a folosi spațiul de lucru pentru col - * - 10)
itchief.ru/assets/uploadify/b/3/9/b3909068e371160c94d8e94da3dc4ae7s.jpg
Da, puteți utiliza grila standard de Bootstrap. Cu toate acestea, este necesar să se limiteze lățimea. Acest lucru se poate face după cum urmează:
1. Crearea 3 blocuri:
2. Limita de lățimea folosind CSS-proprietate max-lățime:
3. Imaginile pot adăuga o clasă img-receptiv. și să utilizați interogări media, dacă este necesar. Sau le folosi ca fundal și setați valoarea proprietății de fond dimensiuni de acoperire.
Vă mulțumim pentru răspunsul dumneavoastră prompt. Spune-mi, se pot adapta într-un fel trei blocuri cu medii, în ciuda faptului că blocul în care acestea sunt, de asemenea, cu fundalul.
Cod.
Situația este comună, dar aceasta nu funcționează pentru a adapta toate conținuturile blocului, inclusiv fundaluri.
Dacă doriți să puneți același conținut pe altul, puteți folosi de poziționare absolută.
HTML-marcare.
Buna ziua, este posibil să bootstrap sistemul fără a impune site-ul adaptiv sub toate dispozitivele? în caz afirmativ, este dificil de a vedea, pentru un incepator? sau este mai bine să nu deranjeze și inclusiv bootstrap? Am decis să renunțe la bootstrap, sau toate la fel pentru mine mai aveți opțiuni pentru a oferi? Cred că site-ul va bootstrap in greutate este mai greu, deoarece am tot ceea ce există, eu doar nu va folosi, iar site-ul va fi încărcat pentru mai mult timp, cu toate că eu sunt nou la acest lucru, ceea ce va recomanda?
căpușă remarcat, descărcare, descărcați 3 fișiere, css, js, config.json. în css dosar este doar un bootstrap și minute bootstrap, mi-au spus, ambele sunt necesare? ca în js. dar de ce treia Fail config.json? L-am pus în cazul în care?
Dacă aveți fișiere js, atunci nu scoateți bifa din secțiunea care conține plugin-uri jQuery. Numai bootstrap.min.css fișier. fișier bootstrap.min.css - este o versiune condensat de fișier bootstrap.css. minimizarea fișier are loc folosind instrumente speciale, care sunt eliminate din spațiile originale și multe alte fișiere. Fișier bootstrap.css mai potrivite pentru studiu, în ea puteți vedea cum este organizat.
fișier config.json conține setările de asamblare dumneavoastră. Ie În cazul în care o versiune nouă a Bootstrap, care îmbunătățesc ceva, puteți merge înapoi la pagina Personalizare Bootstrap și încărcați configurația compilator. După aceea, pe compilați și le descărcați vor primi o versiune nouă a ansamblului dumneavoastră.
aproximativ vă mulțumesc foarte mult pentru ajutor
Și ce vor fi diferite adaptări făcute site-ul profelem manual, de pe site-ul făcut de un novice ca mine, folosind bootstrap care sunt argumentele pro și contra? Multumesc pentru info, încă așezat de așteptare pentru răspunsul dumneavoastră ☺, nu a știut cum să înceapă să impună cu sau fără bootstrap. Se pare ca ar fi de dorit să se impună pe site-urile mai rapide fac, dar, pe de altă parte, vrea să învețe cum Vertan profeli.
Dacă face un site pe Bootstrap, acesta va funcționa corect pe toate dispozitivele și browsere. Poate că acesta este principalul plus. Nu știi subtilitățile browsere diferite pe diferite dispozitive. Într-un browser, s-ar putea arata ca, intr-o alta destul de diferite, iar în al treilea nu funcționează. În al doilea rând studierea CSS Bootstrap Vei învăța cum să creați propria nevoie de a CSS, dar, de asemenea, multe alte lucruri, cum ar fi mai puțin și Sass. Este util să înțelegem modul în care aveți nevoie pentru a construi în mod corespunzător stilurile lor că acestea pot fi modificate cu ușurință. În plus față de Bootstrap și puteți crea un design foarte interesant și neobișnuit.
Alexander, Bună seara. Întrebarea mea se referă vizibil - în ce scop este necesar, în cazul în care puteți seta vizibilitatea unui universal pentru toate dispozitivele?
Alo
Clasa vizibil proiectat pentru a face unitatea vizibilă pe un singur dispozitiv, dar nu și pe alții.
De exemplu, menționat mai jos div va fi vizibil numai pe dispozitive SM, iar restul nu. În plus, acesta va fi afișat sub forma unui bloc (etalate: bloc).
De asemenea, există alte Procesul de Bootstrap clase vizibile care fac element vizibil doar pentru imprimare, dar pe ecranul browser-ul nu.
De exemplu, în urma div vor fi vizibile numai atunci când sunt imprimate, iar pagina nu va fi afișată. În plus, acesta va fi afișat sub forma unui bloc (etalate: bloc).
În cazul în care elementul nu specifică clasele acestui grup, va fi vizibil pe toate dispozitivele.
De exemplu, elementul următor va fi afișat pe toate dispozitivele.
Am realizat mulțumiri pentru clarificare, parafrazând întrebarea, ce rost are, în general, a făcut vizibil pe unele dispozitive, în timp ce altele ascund?
De exemplu, site-ul are getbootstrap.com meniul principal (sus), iar meniul de conținut de pe dreapta.
Deci, pe marile ecrane care afișează 3 blocuri, și doar 2 mici (nici un meniu pe dreapta).
O astfel poate fi văzut pe site-ul api.jquery.com, dar nu există nici un pic de ecran din meniul din stânga.
Bună ziua, Alexander.
Vă mulțumim pentru articolul dumneavoastră, citiți în ordine.
Există o dorință: de a aloca cumva chiar în „Navigare“ link-ul curent, cu titlul articolului pentru a face mai ușor și mai rapid pentru a trece la următorul.
Bună, Oleg.
Vă mulțumesc pentru dorința dumneavoastră, voi face în viitorul apropiat.
Bun timp!
clasa ascuns-xs funcționează bine, dar asta e forță vizibile xs-bloc nu poate funcționa!
Nici din care nu pot să înțeleg de ce unitatea nu dorește să apară numai într-o formă mobilă, și afișează la toate rezoluțiile?
Luca, verificați ce versiune utilizați Bootstrap 3.x.x. Versiunea curentă este 3.3.5.
In versiunile anterioare 3.2.0 Bootstrap aceste clase nu a fost, sunt folosite clase: vizibile-xs. vizibil-sm. vizibil-md și .visible-lg. După 3.2.0, aceste clase au fost eliminate și noi clase. vizibile-xs-bloc. vizibile-xs-inline. vizibile-xs-inline-bloc. vizibil-sm-bloc. vizibil-sm-inline. vizibil-sm-inline-block etc.
Dacă actualizați de la o versiune anterioară (<3.2.0) до 3.3.5 то классы visible-xs. visible-sm. visible-md, и .visible-lg необходимо соответственно заменить на .visible-xs-block. visible-sm-block. visible-md-block, и .visible-lg-block.
Alo
Prompt în cazul în care să aplice class = «clearfix vizibile - * - bloc», "..- inline" și "-inline-bloc."
mulțumesc
Bună ziua, Serghei.
În Twitter Bootstrap 3 are grupa 2 clase pentru a afișa și a ascunde elemente:
Grupa 1 - ascuns-xs clase, ascuns-sm, ascuns-MD, ascuns-lg.
Fiecare dintre ele este proiectat pentru a ascunde elementul de afișare pe un anumit dispozitiv.
De exemplu, următorul cod ascunde afișarea elementului div pe xs și dispozitivele SM (dispozitive de pe elementul div MD și LG va fi afișat):
Grupul 2 - clase vizibile-xs- *, vizibile * SM, vizibil-MD- *, vizibil-lg- *.
Fiecare dintre ele este proiectat pentru a afișa elementul pe un anumit dispozitiv, precum și la alte piei.
De exemplu, următorul cod arată elementul div xs numai dispozitive cu alte piei brute (sm, MD si LG):
3 cuvânt din clasa (bloc, inline sau inline-block) titlu determină modul în care va fi afișat elementul modul bloc (bloc), ca o linie (inline) sau a unui rând-bloc (inline-block).
Cred că, folosind aceste clase clare. Ie acestea sunt utilizate pentru a afișa sau a ascunde elemente.
clasa .clearfix este folosit pentru a crea mesh folosind blocuri adaptive (col - * - *). pentru că blocuri adaptive sunt plutitoare, uneori, este necesar să se anuleze învelitorii că markup nu este „plutit“.
Problema în cauză este al treilea element din structura vizibilă - * - *. Ie -bloc, -inline, -inline-bloc. Despre celelalte componente pe care sunt toate bine descrise anterior. Voi încerca să formuleze întrebări cu mai multă precizie. Mulțumesc.
Bună ziua, ultimul cod,
IMHO pagini fiecare bloc web (capac Sadbar, conținut, subsol) este mai bine plasat pe o linie separată:
Hei, cu un capac și o pivniță de acord. Varianta de mai logică. Deși nimeni nu vă interzice să creați un aspect în articol, acesta va fi valabil din punct de vedere al Bootstrap, standardelor și structura. Prin modul în care toate au argumente pro și contra, după cum a spus Einstein, totul este relativ. S-ar putea găsi chiar și avantaje, cum ar fi blocuri (componente) va fi mai puțin, ceea ce este deosebit de important pentru persoanele care doresc să minimalism :)
Unele sunt foarte atasat de urmatoarea structura:
Ce crezi?