Încetați cu Bootstrap de pe Twitter

Twitter a introdus recent Bootstrap, o bibliotecă de stiluri CSS destinată dezvoltatorilor de aplicații web care au nevoie de ajutor pentru proiectare. Setul de instrumente include totul, de la machete de grile până la butoane și modale, și funcționează pe aproape toate browserele moderne, tot drumul înapoi la IE7.

Să vedem ce putem face cu asta?

Bootstrap este, de asemenea, îmbunătățită prin Preprocesor mai puțin, care adaugă câteva motive suplimentare pentru a utiliza Bootstrap, deși vom exclude funcționalitatea mai mică din domeniul acest tutorial, pentru a păstra lucrurile simple.

Bootstrap include un pic de documentație, dar nicăieri nu explică cum se utilizează setul de instrumente (în schimb, există doar o pagină demo mare pentru a vă investiga). Deci, în acest articol, vom elimina pagina de exemplificare a Bootstrap și vom analiza cum să replicăm elementele pe care le acoperă Bootstrap. În furnizarea de exemple, vom crea, de asemenea, o pagină de probă realizată în întregime cu Bootstrap.

Ce este acoperit?

Vom arunca o privire la următoarele (utilizați linkurile pentru a trece la secțiunile diferite):

Sistemul de rețea
Tipografie
Mese
Formulare și butoane
Navigare
Tabele și pastile
Paginare
Alerte și mesaje de eroare
modals

Sistemul de rețea

Grilele sunt o parte integrantă a unei mulțimi de desene web. La fel cum un planificator urban proiectează pe o rețea, un designer de web își poate alinia elementele în așa fel. Bootstrap include un sistem de rețea care are o lățime de 940 de pixeli, încapsulat înăuntru recipient clasă. Există șaisprezece clase de coloane diferite, împreună cu lățimea fiecăruia, adăugând în mod cumulativ 60px, pe măsură ce crește numărul, începând de la 40px. De exemplu, clasa span1 are o lățime de 40px, în timp ce clasa span3 are o lățime de 160px.

După cum sa demonstrat în imaginea de mai sus, putem folosi o combinație de clase diferite pentru a crea o lățime totală egală cu 940 de pixeli, inclusiv marja de 20 pixeli adăugată fiecăruia. De exemplu, utilizarea a patru div.span4 clase ar fi, traduse, înseamnă 220 + 20 + 220 + 20 + 220 + 20 + 220 care, odată ce batem calculatorul, este egală cu 940 de pixeli. Împachetind toate acestea într-un rând clasa, Bootstrap conturi pentru marja de douăzeci de pixeli din ultima coloană prin mutarea întregului lucru de douăzeci de pixeli înapoi.

   Coloana # 1
 Conținut pentru coloana # 1.
 
  Coloana # 2
 Conținutul pentru coloana # 2.
 
  Coloana # 3
 Conținutul pentru coloana # 3.

Codul de mai sus va genera un set destul de egal de coloane CSS care prezintă un conținut minimal. Firește, putem schimba doar unele din aceste clase sau adăugăm / scădem etichete pentru a crea machete diferite. O altă caracteristică a setului de instrumente Bootstrap este abilitatea de a "sări" o coloană prin compensarea acesteia. Clasele de offset sunt, din nou, numerotate 1-16 unde lățimile lor urmează același model +60, deși acestea includ acum încă 40px pentru a compensa marginea stângă și dreaptă a coloanei respective. De exemplu, putem lua exemplul de mai sus, dar eliminăm coloana din mijloc adăugând offset5 clasă la eticheta de sfârșit. De exemplu:

   Coloana # 1
 Conținut pentru coloana # 1.
 
  Coloana # 3
 Conținutul pentru coloana # 3.

Este destul de simplu să manipulați acest lucru doar cu câteva numere care trebuie schimbate, iar imaginea de la începutul acestei secțiuni ar trebui să fie folosită ca un ghid pentru unele structuri recomandate.

Tipografie

Unul dintre lucrurile care trece prin aproape toate elementele prezentate în acest tutorial este tipografia. Bootstrap vine cu toate etichetele de tipografie pe care le-ați dori, pentru orice, de la un

eticheta la

și întreaga ierarhie a titlurilor. Sincer, acest lucru este "Web Development 101" chestii pe care probabil știți deja, așa că nu voi pierde timpul să vă explic cum să stil. E ceva destul de elementar.

Este important să rețineți că Bootstrap nu contează pentru etichetele vechi, acum depreciate, deci nu trebuie să vă faceți griji acolo dacă utilizați un CMS care le utilizează sau pentru un client care nu cunoaște nicio alternativă.

Citându-l

În cazul în care Bootstrap are nevoie de o explicație mai mult este atunci când vin să utilizați

etichetă. Puteți utiliza eticheta pe cont propriu pentru a afișa cotația indentată, cu o margine gri groasă în stânga. Cu toate acestea, poate fi îmbunătățită prin inserarea altor tag-uri înăuntru pentru a atribui cotația. Când vine vorba de adăugarea unui atribut, pur și simplu înfășurați textul dvs. de cotație într-o
tag și sursa într-un tag-ul și Bootstrap vor schimba automat și vor pune o bordură în fața sursei.

Lorem ipsum dolor stați amet, consectetur adipiscing elit. Împreună cu un ante venenatis dapibus posuere velit aliquet.
Connor Turnbull, 30 august

Veți ajunge la un rezultat similar cu imaginea de mai jos, în funcție de conținutul pe care l-ați introdus între paragraf și etichetele mici.

liste

Listele reprezintă un alt fragment al spectrului de tipografie care este acoperit de Bootstrap și vine cu patru seturi diferite de stiluri: liste cu marcatori, liste cu marcatori imbricate, liste ordonate și glosare. Din nou, acestea nu sunt greu de folosit, deoarece nu se abat de la standardele HTML. Deoarece listele pot fi construite în moduri diferite, iată o recapitulare rapidă a modului de utilizare a acestora cu stilurile Bootstrap.

Codul de mai jos este o listă de bază neordonată, cu bulă, care va produce ceva similar cu primul exemplu din imaginea de mai jos. Schimbați ul pentru un ol pentru a produce o listă ordonată, precum cea din al doilea exemplu.

Lorem ipsum dolor sta amet

Consectetur adipiscing elit
?

Dacă adăugați unstyled clasa în lista neordonată, elementele din listă neschimbate nu vor fi marcate sau ordonate. Vor apărea ca niște linii regulate, în timp ce articolele imbricate vor avea un glonț în stânga.

Lorem ipsum dolor sta amet

Consectetur adipiscing elit
?

Adăugarea unei liste de descrieri se face în același mod în care v-ați aștepta în afara Bootstrap și rezultă într-un eșantion ca cel din ultima imagine.

Lorem ipsum

Lorem ipsum dolor sta amet

consectetur

Consectetur adipiscing elit
?

Mese

Bootstrap este un set de instrumente destinat în parte noilor designeri web, astfel încât nu este neapărat să nu spunem că aceste lucruri nu sunt destinate aranjamentelor. În schimb, tabelele sunt destinate unor date tabulare, iar Bootstrap face o treabă destul de bună în perfecționarea datelor tabulare cu stilurile sale, fără a mai fi nevoie de alte clase sau atribute. De exemplu, putem să aruncăm o privire la un fragment regulat de HTML care ar genera un tabel.

# Nume Numele de familie Limba

1 niste unu Engleză

2 Joe Pachet de sase Engleză

3 Stu Adâncitură Cod

Codul de mai sus creează tabelul din imaginea de mai jos, așa cum este folosit în exemplul oficial Twitter. Are trei rânduri de conținut și un antet în patru coloane și este destul de standard. Cu puțină manipulare (zero, fără manipulare) la crearea standard a unei mese, Bootstrap aplică automat stilurile sale.

În acest caz, trebuie să vă amintiți cel mai important lucru pentru a vă cuișa corect etichetele. Stilurile nu se aplică dacă nu împletiți rândul de poziție în a etichetă, de exemplu.

În mod prestabilit, tabelul nu este în formă de zebră, în cazul în care culorile alternative ar putea umple fundalul fiecărui rând. Acest lucru este ușor de activat, cu toate acestea, pur și simplu prin adăugarea -Zebra dungi clasa la
fără nici o manipulare a rândurilor sau a părților individuale.

?
În cele din urmă, cu adăugarea unei mici bucăți de jQuery, dar fără modificarea HTML, în afară de adăugarea sortTableExample ca ID-ul

#
, puteți adăuga funcționalitatea de sortare atunci când se face clic pe titlul unei coloane. Această funcție necesită pluginul Tablesorter 2.0 jQuery, descărcabil gratuit. După cum probabil ați ghicit deja, va trebui de asemenea să apelați jQuery pentru ca aceasta să funcționeze.

?
Formulare și butoane
Cele mai multe lucruri pe care le-am acoperit deja sunt destul de simple, în cazul în care Bootstrap va aplica stiluri codului tău cu puțină sau nicio schimbare de la normal. Dincolo de acest lucru, putem trece acum la unele lucruri care necesită o explicație și o mai multă îndrumare.
Formulare
Pentru formulare, există o mulțime de stiluri diferite pe care le puteți utiliza, deci ne vom uita la fiecare în parte. Apoi, puteți să le folosiți numai în combinație și să le manipulați cu cunoștințele preexistente ale formularelor HTML vechi obișnuite.
În primul rând, trebuie remarcat faptul că întregul dvs. formular ar trebui să fie înfășurat într - un etichetă, dar probabil că știți deja asta. Bootstrap vă recomandă să vă împachetați elementele
tag-uri, cu o suplimentare etichetă.

Lorem ipsum dolor sta amet (câmpurile dvs. merg aici)

În general, configurația formularului nu trebuie să difere de codul de mai sus. Singura altă opțiune pe care Bootstrap o oferă este să opteze pentru formularele stivuite, unde etichetele se află în partea de sus a unui câmp, mai degrabă decât în stânga. Acest lucru poate fi realizat prin adăugarea Formularul stivuit clasa la etichetă.

Introducerea textului

Pentru a începe o acoperire a câmpurilor formularului, vom examina un câmp de intrare regulat cu o etichetă. Fragmentul de cod de mai jos este în esență a si un tag, înfășurat într-o
eticheta cu clearfix pentru a asigura distanța corectă. În plus, câmpul real este înfășurat în altul
cu intrare clasa, din nou, pentru a asigura distanța corectă.

Lorem ipsum

Din motive de acest tutorial, voi ignora cateva practici care ar trebui folosite in codul tau. De exemplu, fiecare intrare ar trebui să aibă un ID, care este legat la etichetă prin atributul "pentru" și, în general, veți dori să denumiți câmpurile de intrare pentru a le apuca atunci când este vorba de procesarea datelor. Căutăm în mod specific modul de utilizare a stilurilor Bootstrap aici, astfel încât acele tipuri de atribute nu au fost incluse în exemplele mele pentru a încerca să păstreze lucrurile cât mai simple posibil. Cu toate acestea, deși sunt utilizate împreună cu Bootstrap, acele sarcini nu trebuie uitate.

Prin adăugarea extra larg clasa la , câmpul de formă este lărgit.

Putem dezactiva o intrare în mod regulat, prin adăugarea atributelor corespunzătoare, așa cum se arată în exemplul de mai jos. Stilurile Bootstrap sunt adăugate în invalid clasă, care ar trebui adăugată pentru a arăta vizual că un utilizator nu poate interacționa cu acel câmp prin înlăturarea acestuia.

Lorem ipsum

În timp ce abordarea gri a unui câmp cu handicap este obținută prin utilizarea unui etichetă, una neefectuată nu este. În schimb, Bootstrap folosește o simplă care pot fi utilizate împreună cu o intrare ascunsă. Aceste câmpuri sunt utilizate pentru informații pe care utilizatorul nu ar trebui să le editeze, cum ar fi o dată sau o adresă IP colectată automat.

Lorem ipsum
Lorem ipsum dolor sta amet

Privirea noastră finală asupra intrărilor de text de styling este de a afișa ajutor contextual atunci când apare o eroare. Se face prin adăugarea unui eroare clasa la
care formează clarificarea, și la eticheta în sine. Adăugarea unui eticheta cu help-inline clasa dedesubt adaugă mesajul de ajutor în partea dreaptă.

Lorem ipsum
Dolor stai amet

Dropdown Selectați

Un meniu derulant este structurat într-un mod similar, folosind codul obișnuit, după cum se arată mai jos.

Lorem Ipsum

extra larg clasa la un câmp de text este opusul mediu clasa a Lorem ipsum dolor sta amet

Acest cod va genera o singură căsuță de selectare cu o etichetă în dreapta. Pentru a crea unul suplimentar, repetați articolul din listă și conținutul său, apoi voif ?, aveți o listă de casete de selectare. Pentru a dezactiva o casetă de selectare, trebuie doar să adăugați invalid atribut la tag, și invalid clasa la etichetă. Lorem ipsum dolor sta amet În plus, există două tipuri suplimentare de casete de selectare care sunt asociate cu câmpurile de text: casete de selectare prefixate și anexate. Din nou, aceasta este destul de explicită și este foarte asemănătoare cu un câmp text obișnuit. Cu toate acestea, de această dată aveți nevoie să înfășurați caseta de selectare în a etichetă (cu add-on clasa) și fie input-Prepend sau input-append clasă la părinte . Apoi, tot ce a mai rămas este să vă asigurați că ați pus eticheta și câmpul în dreapta, în funcție de dacă doriți să fie prependate sau anexate. Lorem ipsum Codul de mai sus se referă la o casetă de selectare atașată, dar, dacă doriți un număr prestabilit, este puțin de schimbat. Lorem ipsum Intrări de fișiere Intrările de fișiere sunt foarte asemănătoare cu câmpurile de text, iar codul de mai jos este destul de explicabil. Creați o intrare obișnuită a fișierului cu fișier de intrare clasă. Lorem ipsum Zone de text Ultimul stil Bootstrap pentru formulare este zona de text. Zona de text este creată în același mod ca și câmpul de text dintr-o singură linie. Ca și extinderea unui câmp de text, zona textului are de asemenea o clasă proprie pentru ao face mai largă, xxlarge. Lorem ipsum Opțional, puteți adăuga o linie mică de ajutor sub câmp cu următoarea linie adăugată imediat după </code> etichetă.</p> <pre><span>Lorem ipsum dolor sta amet</span></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_13.png"> <h3>Butoane</h3> <p>Acum este timpul să procesăm formularul nostru și, în mod normal, facem acest lucru dând clic pe un buton. Din fericire, Bootstrap acoperă butoanele și sunt foarte simplu de adăugat.</p> <p>Butoanele pot fi adăugate prin intermediul fie a <code><a></code> sau a <code><button></code> etichetă. Ambele au aceleași clase și vor arăta identice, dar ar trebui să încercați să rezervați butoane pentru acțiuni și linkuri pentru linkuri. De exemplu, un buton va fi scris astfel:</p> <pre><button>Lorem ipsum</button></pre> <p>Și un buton de identitate, dar creat ca o legătură, ar fi scris astfel:</p> <pre>Lorem ipsum</pre> <p>Implicit, butonul va apărea într-un stil de gri deschis. Cu toate acestea, acest lucru poate fi schimbat ușor cu unul din celelalte patru (albastru, albastru, verde și roșu) prin aplicarea unei clase suplimentare.</p> <ul> <li> <code>primar</code> pentru un buton albastru care reprezintă acțiunea principală (de ex., trimiterea unui formular)</li> <li> <code>info</code> pentru un buton albastru mai deschis, de obicei folosit pentru a accesa informații</li> <li> <code>succes</code> pentru un buton verde, folosit pentru a semnala succesul</li> <li> <code>Pericol</code> pentru un buton roșu, utilizat de obicei pentru acțiuni ireversibile sau periculoase, cum ar fi ștergerea</li> </ul> <pre><button>Primar</button> <button>Mod implicit</button> <button>Info</button> <button>Succes</button> <button>Pericol</button></pre> <p>De asemenea, putem schimba mărimea unui buton din modul implicit. Pentru ao mări, pur și simplu adăugați <code>mare</code> clasați sau micșorați-o cu (da, ați ghicit-o) <code>mic</code> clasă.</p> <p>În cele din urmă, pentru a dezactiva un buton, tot ce trebuie să faceți este să adăugați <code>invalid</code> și, în cazul unui buton de acțiune, setați atributul dezactivat.</p> <pre><button disabled>Lorem ipsum</button></pre> <p>sau</p> <pre><a>Lorem ipsum</pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_14.png"> <hr> <h2>Navigare</h2> <p>Bootstrap include o bară de navigare fixă care seamănă cu cea de pe site-ul Twitter. Bara este în esență alcătuită din trei secțiuni, link-ul titlu, elementele de meniu din bara de căutare, încapsulate în câteva <code><div></code> etichete care nu merită explicate.</p> <p>În codul de mai jos, veți observa o <code><h3></code> eticheta care deține titlul. Este destul de ușor să modificați acest lucru și să adăugați propriul dvs. link și text.</p> <pre><h3>Lorem ipsum</h3></pre> <p>În continuare, sunt elementele din meniu, care sunt doar elemente de listă neclasificate cu link-uri. Este suficient de simplu să duplicați aceste elemente, deoarece acestea nu necesită stiluri specifice Bootstrap, în afară de <code>activ</code> clasa pe link-ul curent.</p> <pre><ul> <li>Acasă</li> <li>Lorem</li> <li>ipsum</li> <li>dolor</li> </ul></pre> <p>Ultima listă este pentru meniul derulant. Dispune de un singur element de listă, cu o altă listă imbricată care apare pe hover over. Cea de-a treia linie a codului de mai jos este elementul de listă care apare constant pe bara de navigare, în timp ce lista care începe de la linia 4 este elementul de hover.</p> <pre><ul> <li> Lorem ipsum <ul> <li>Dolor stai</li> <li>Amet Consequeter</li> <li>Destul cu latina</li> </ul> </li> </ul></pre> <p>După cum veți observa, adăugați un element de listă goală cu <code>compas</code> clasa va adăuga un divizor în meniul derulant.</p> <p>În uz, bara dvs. de sus ar trebui să arate cam așa, poziționată chiar în partea de sus a paginii.</p> <pre><div> <div> <div> <h3>WebDesignTuts+</h3> <ul> <li>Acasă</li> <li>Tutoriale</li> <li>Articole</li> <li>Sondaj săptămânal</li> </ul> <form> <input type="text" placeholder="Search" /> </form> <ul> <li> Lorem ipsum <ul> <li>Dolor stai</li> <li>Amet Consequeter</li> <li>Destul cu latina</li> </ul> </li> </ul> </div> </div> </div></pre> <p>Rețineți că veți dori să compensați înălțimea de 40 de pixeli a barei din partea de sus a paginii dvs., în caz contrar se va suprapune primele elemente ale paginii dvs..</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_15.png"> <hr> <h2>Tabele și pastile</h2> <p>Tabelele și pastilele sunt ușor de creat, deoarece sunt doar liste regulate vechi. Desigur, acestea nu funcționează - bootstrap-ul este vorba despre stiluri. Pur și simplu construi lista cu <code>file</code> clasa pentru interfața tab tab, sau <code>pastile</code> pentru pilulele pentru pilule. Ca în bara de navigare din secțiunea anterioară, adăugați <code>activ</code> clasa la un element din listă îl va evidenția.</p> <p>Pentru comutatorul de file, utilizați ceva similar cu acesta:</p> <pre><ul> <li>Lorem</li> <li>ipsum</li> <li>dolor</li> <li>Sta</li> <li>Amet</li> </ul></pre> <p>Pentru a utiliza pilule în schimb, schimbați linia de sus pentru următoarele.</p> <pre><ul></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_16.png"> <hr> <h2>Paginare</h2> <p>Acum trecem la paginare, care nu funcționează (cum ar fi filele și pastilele), dar este încă în stilul Bootstrap. Bootstrap manipulează butoanele de paginare aceleași file, într-o listă care este înfășurată de această dată într-un <code><div></code> cu <code>paginare</code> clasă. Fiecare element de listă poate avea un număr legat în el (sau o elipsă), cu excepția primului și ultimului element rezervat pentru legăturile prev / următoare. Acestea au <code>prev</code> și <code>Următor →</code> clase, respectiv.</p> <p>În plus, orice buton poate fi dezactivat prin adăugarea <code>invalid</code> clasă, iar legătura activă este evidențiată cu <code>activ</code> clasă. Ca astfel:</p> <pre><div> <ul> <li>Anterior</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>Următor →</li> </ul> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_17.png"> <hr> <h2>Alerte și mesaje de eroare</h2> <p>Barurile de alertă sunt foarte asemănătoare vizual cu butoanele, deși ele sunt construite în mod diferit. Fiecare mesaj de eroare este a <code><div></code> eticheta cu <code>-Mesaj de alertă</code> clasă. Există patru tipuri diferite de mesaje, fiecare cu o clasă corespunzătoare care trebuie de asemenea adăugată:</p> <ul> <li> <code>avertizare</code> pentru o bară galbenă</li> <li> <code>eroare</code> pentru un bar roșu</li> <li> <code>succes</code> pentru un bar verde</li> <li> <code>info</code> pentru un bar albastru</li> </ul> <p>Mesajele de avertizare sunt apoi scrise după cum urmează, selectând numai o singură clasă <code>avertisment / eroare / succes / info</code>.</p> <pre><div> ? <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.</p> </div></pre> <p>Doar pentru informațiile dvs., al doilea rând al codului de mai sus adaugă "?" în dreptul mesajului de modificare, care ar putea fi legat de o acțiune care elimină mesajul.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_18.png"> <p>Alertele nu trebuie să fie o afacere cu o singură linie. Dacă mesajul dvs. depășește o singură linie, pur și simplu adăugați <code>Bloc-mesaj</code> clasați la codul pe care îl utilizați pentru o singură linie, în timp ce utilizați în continuare clasele de tip diferite.</p> <pre><div> × <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor? </p> </div></pre> <p>Aceste mesaje sunt, de asemenea, capabile să dețină butoane, utile în cazul în care alerta trebuie rezolvată cu o alegere. Dacă reveniți la secțiunea noastră de pe butoane, veți ști cum să le adăugați. Doar asigurați-vă că utilizați versiunile mici, adăugând <code>mic</code> clasa la butonul în sine, și înfășurați-l într-o <code><div></code> eticheta cu <code>alert-acțiuni</code> clasă.</p> <pre><div> × <p><strong>Lorem ipsum dolor sta amet!</strong> Fusce interdum euismod tempor? </p> <div> Lorem ipsum dolor Sit amet </div> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_19.png"> <hr> <h2>modals</h2> <p>Modalitățile pot fi utile pentru a afișa informații în anumite scenarii, folosite în mod obișnuit pentru introducerea datelor, cum ar fi informații despre utilizatori sau postări. Modul Bootstrap este destul de simplu și este împărțit în trei secțiuni; antetul, corpul și subsolul. În primul rând, începem prin deschiderea modalului <code><div></code> tag-ul și poziționarea acestuia cu unele stiluri inline pe care Bootstrap le cere.</p> <pre><div></pre> <p>În interiorul acelei etichete, plasăm apoi cele trei secțiuni, primul fiind antetul. Antetul are o clasă de <code>modal-header</code> și include doar două linii, un <code><h3></code> eticheta pentru titlu, și (opțional) legat "?" care poate fi personalizat pentru a închide popup.</p> <pre><div> <h3>Lorem ipsum</h3> × </div></pre> <p>În continuare, avem conținutul principal. Este foarte simplu, fiind doar a <code><div></code> cu <code>modal-corp</code> clasa și conținutul dvs. în interior. Astfel:</p> <pre><div> <p>Lorem ipsum dolor sta amet</p> </div></pre> <p>În final, avem subsolul modal (altul <code><div></code>, de data aceasta cu <code>modal-footer</code> clasa), care constă în general din butoane pentru a acționa. Acestea sunt generate în același mod ca toate celelalte butoane pe care le-am creat cu Bootstrap, deci nu au nevoie de explicații suplimentare.</p> <pre><div> Lorem ipsum dolor Sit Amet </div></pre> <p>Bine, am mințit. Nu a fost ultimul pas. Încă mai trebuie să închidem originalul <code><div></code>.</p> <pre></div></pre> <p>Pune toate aceste părți împreună ca unul, și tu ai o fereastră destul de dulce modală. Din păcate, pe măsură ce vă reamintesc, Bootstrap se ocupă de stilul prezent; modalul nu va apărea ca și cum ar fi apărut. Ar fi minunat dacă Bootstrap sa extins pentru a avea unele funcționalități în plus față de CSS, dar pentru moment va trebui să generați sau să vă surprindeți propria.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_20.png"> <hr> <h2>Gândurile finale</h2> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_21.png"> <p>Imaginea de mai sus arată designul final. Se compune din toate elementele pe care le-am creat în acest tutorial (există o demonstrație separată pentru elementele formularului), în întregime în sfera de aplicare a Bootstrap. Sperăm că acest articol a fost de folos pentru dvs., mai ales că poate fi dificil pentru unii să descifreze pagina exemplară inclusă (care acționează ca singura documentație inclusă în descărcare).</p> <p>Îmi place Bootstrap. Dacă sunteți nou în dezvoltarea de web, acesta oferă o gamă largă de elemente de utilizat, deși site-ul dvs. ar putea ajunge în căutarea unui pic prea Twitter-ish printr-o mulțime de elemente partajate. Cu toate acestea, simplitatea și ușurința utilizării este prea dificil de ignorat dacă nu doriți / nu puteți scrie propriile dvs. Nu pot să aștept să încerc să folosesc unele din aceste lucruri într-un nou proiect.</p> <hr> <h3>Resurse aditionale</h3> <p>Folosind mai puțin CSS, BluePrint și WP pentru un proces de lucru mai rapid Wptuts+<br>Sfat rapid: Nu introduceți niciodată un Prefix de furnizor din nou Nettuts+<br>Bootstrap de pe Twitter este noul web designer de web AppStorm<br>Șabloane de șabloane pe temaForest</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Web design</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/steps-to-becoming-a-quality-wordpress-theme-developer.html">Pași pentru a deveni un dezvoltator WordPress de calitate</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/steps-to-becoming-a-quality-wordpress-theme-developer.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/stepping-into-the-fashion-photography-industry.html">Intrarea în industria modei de fotografie</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_3/stepping-into-the-fashion-photography-industry_5.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Căutare..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>

#

#	Nume	Numele de familie	Limba
1	niste	unu	Engleză
2	Joe	Pachet de sase	Engleză
3	Stu	Adâncitură	Cod