Cum să creați mai multe coloane receptive cu Bootstrap 3
Publicat: 2022-02-16
Doriți să vă îmbunătățiți receptivitatea site-ului dvs. cu Bootstrap? Cel mai important aspect al Bootstrap este sistemul său de grilă mobilă cu 12 coloane. Acesta este ceea ce utilizați pentru a crea un aspect receptiv.
În acest tutorial video, veți crea un site web de bază folosind Bootstrap și veți afla cum să utilizați sistemul de grilă Bootstrap pentru a crea un aspect receptiv cu mai multe coloane.
Înainte de a viziona tutorialul
Înainte de a putea urma tutorialul video de mai jos și de a învăța cum să vă creați propriile coloane receptive, veți avea nevoie de:
- Înțelegerea de bază a ce este Bootstrap
- Înțelegerea de bază a sistemului de grilă Bootstrap
- Descărcați Bootstrap pe hard disk
- Creați un fișier Bootstrap index.html de bază pe care să îl construiți
Ce este Bootstrap
- Bootstrap este un cadru pentru dezvoltatorii HTML, CSS și JavaScript care lucrează la receptivitatea site-ului.
- Constă în stiluri CSS receptive deja pre-construite pentru coloane, liste, navigare, formulare web și multe alte elemente web.
Înțelegerea sistemului Bootstrap Grid
- Sistemul de grilă Bootstrap clasifică dimensiunile ecranului în patru tipuri: foarte mic, mic, mediu și mare.
- Extra-mic este pentru telefoane mobile. The Small este pentru tablete, precum I-Pad. Medium este pentru monitoare desktop. Și Large este doar pentru monitoare desktop mai mari.
- Pentru a vă ajuta să reglați cu precizie capacitatea de răspuns pentru aceste patru tipuri de ecrane, Bootstrap împarte lățimea dispozitivelor de vizualizare web în sistemul de grilă cu 12 coloane.
- Fiecare dintre aceste patru tipuri de grilă Bootstrap devine receptiv numai dacă îi atribuiți propria sa clasă CSS desemnată.
- De exemplu, pentru a face un div receptiv pentru dispozitive foarte mici, div-ul trebuie să aibă propria clasă Bootstrap .col-xs-<number_of_columns_to_take>, cum ar fi <div class="col-xs-6">.
Se descarcă Bootstrap
- Accesați getboostrap.com și faceți clic pe butonul „Descărcați Bootstrap”:
- Veți vedea pagina „Noțiuni introductive”. Faceți clic pe butonul „Descărcați Bootstrap”:
- Salvați acest fișier pe hard diskul computerului, oriunde doriți. Nu trebuie să fie salvat pe un server web.
- Dezarhivați acest fișier și redenumiți folderul extras în „bootstrap”.
Pregătirea paginii dvs. de bază Bootstrap index.html
Pasul 1. Creați fișierul index.html Bootstrap
- Reveniți la pagina „Noțiuni introductive” (http://getbootstrap.com/getting-started/#download) și faceți clic pe linkul „Șablon de bază” din bara laterală din dreapta:
- Veți vedea codul „Șablon de bază”. Faceți clic pe butonul „Copiere” pentru a copia codul:
- Lipiți codul „Șablon de bază” în editorul de text și salvați-l ca index.html în același folder, unde ați salvat folderul „bootstrap”. Va deveni acum prima pagină a site-ului dvs. Bootstrap.
- Deschideți index.html nou creat și aruncați o privire pe site-ul dvs. web Bootstrap de bază:
- Deschideți fișierul index.html în editorul dvs. de text și între etichetele de deschidere <body> și <h1> adăugați <div class="container"> (1). Închideți acest nou div după eticheta de închidere </h1> (2) și salvați fișierul:
- Verificați partea frontală a paginii și observați cum apare „Hello World!” nu se mai lipește de marginea paginii și acum s-a deplasat ușor spre dreapta, pentru a o face să pară puțin mai ordonată. Clasa „container” din Bootstrap pe care ați atribuit-o acestui div a adăugat la acest text o marjă:
- Reveniți la fișierul index.html. Între etichetele <h1> și </h1> înlocuiesc „Hello World!” la „Trusthub”. Salvați fișierul și verificați front-end-ul site-ului dvs.
Pasul 2. Adăugați puțin conținut și o bară laterală
- Reveniți la fișierul index.html și, sub codul <h1>Trustub</h1>, copiați următorul cod:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Reveniți la front-end-ul site-ului dvs. Reîmprospătați-l. Ar trebui să vedeți acum conținutul dvs. și bara laterală „Echipa noastră”, fără un aspect receptiv cu coloane încă:
- Reveniți la site-ul web getbootstrap.com și în meniul de sus faceți clic pe butonul „CSS”:
- În bara laterală, faceți clic pe butonul „Grid System”:
- Derulați în jos pagina la secțiunea „Opțiuni grilă” (1) și luați notă de sistemul de grilă Bootstrap cu 12 coloane, cu cele patru tipuri de dimensiuni de ecran, lățimea și prefixele de clasă CSS desemnate (2):
- Nu vă faceți griji dacă opțiunile sistemului de grilă Bootstrap nu au sens pentru dvs. Toate se vor reuni pentru tine într-o secundă când vei începe să joci în jurul lor pe site-ul tău.
- Deschideți din nou fișierul index.html și sub <div class="row">, pentru <div> existent, introduceți clasa „col-md-9”. Noul tău div acum ar trebui să arate „div class="col-md-9">:
- Acum accesați div-ul dvs., situat chiar deasupra antetului „Out Team” <h2> și dați-i clasa CSS de grilă Bootstrap „col-md-3”. Salvați fișierul:
- Reveniți la site-ul dvs. pentru a vedea această schimbare în acțiune. Apăsați tasta F5 de pe tastatură pentru a vă reîmprospăta site-ul. Acum veți vedea că zona dvs. de conținut și bara laterală sunt așezate una lângă alta.
- Div-ul dvs. de conținut ocupă acum 9 dintre cele 12 coloane disponibile în grila Bootstrap (75% din lățimea întregului ecran de pe desktop). Și bara dvs. laterală ocupă 3 dintre 12 coloane ale grilei Bootstrap (25% din lățimea întregului ecran de pe desktop):
Sclipitor! Acum sunteți gata să urmați tutorialul video de mai jos. Să începem.
Felicitări! Tocmai ați învățat cum să creați un aspect de pagină web receptiv cu mai multe coloane folosind Bootstrap. Doriți să aflați mai multe despre Bootstrap? Dacă da, vă rugăm să vizitați canalul nostru YouTube OSTraining și să urmăriți „Tutorialele Bootstrap Framework”.