Spremnik za pokretanje: korisnički priručnik - Tehnološke vijesti i high-tech flipperworld.org

Korištenje kontejnerskog bootstrap će korisniku dati moćnu baznu stranicu. A ono što zaista čini impresivnim je širok raspon komponenti koje se mogu dodati na stranicu. Budući da Bootstrap već ima ugrađeni CSS i javascript, razvijaju se komponente i funkcionalne. Naravno, korisnik ih može dodatno urediti kako bi prilagodio stranicu prema vašim željama.

Grid Princip

Ovaj skup alata za kreiranje web-stranica i web-aplikacija temelji se na mreži za točno mjerenje komponenti za gledanje na različitim zaslonima. Mreža sustava spremnika kontejnera sastoji se od spremnika, redaka i stupaca koji se koriste za određeni izgled stranice. Bootstrap spremnici se koriste za određivanje širine rasporeda. Elementi se dodaju u spremnike i utječu na njegovu širinu. To je element s class = "container" i utječe na sve elemente u njemu.

Spremnici imaju 15 piksela koji omekšavaju pogled s kraja stranice. Linije i stupci dodaju se unutar spremnika s fiksnom postavkom Bootstrap Container default, koja ovisi o veličini preglednika. Širina uređaja prikazana je u donjoj tablici:

Prikaz širine uređaja

Širina spremnika

Manje od 768 px 18)

768px - 991 px

750 px

)
992px - 119px

970 px

1200 px i više

1170 px

Pravila mreže:

Stupci trebaju bitiizravni dječji element linije.

Linije se koriste samo za spremanje stupaca i ništa drugo.

Linije bi trebale biti smještene unutar spremnika.

Ova su pravila vrlo važna. Linije i stupci uvijek rade zajedno, a korisnik ne smije koristiti jedan bez drugog.

U početku se to može činiti komplicirano, ali je stvarno jednostavno, samo trebate razumjeti kako radi Grid. Ako korisnici ne žele da se spremnici mijenjaju u fiksnoj širini, možete koristiti class = "container-fluid" umjesto class = "container". To će uzrokovati da se spremnici uvijek podudaraju s spremnikom Bootstrap do pune širine zaslona i mijenjaju veličinu fiksne širine. Grid sustav omogućuje do 12 stupaca po stranici. Mogu se koristiti odvojeno ili grupno. Da biste grupirali stupce zajedno, morate stvoriti redak, za koji dodate div s class = "row", koji sadrži kod stupca.

Postavljanje intervala

Da biste imali uredan oblik, najprije morate razumjeti kako Bootstrap postavlja interval. Za sve obrasce trebate staviti oznaku i kontrolni element u class = "form-group". Kontrole i naljepnice imaju stil intervala. Moraju nužno biti u svojoj klasi.

Klasa kontrole oblika postavlja širinu spremnika Bootstrap na 100%, prisiljavajući ga da prekrije širinu obrasca i promijeni veličinu pomoću prozora. Ovo se svojstvo koristi za unos i odabir kontrola. Tako će odabrana kontrola biti formatirana s uključenimkontrolom obrasca i izgledat će kao opcija s klasom kontrole oblika ili bez nje, a upravljanje unosom će biti formatirano dodatkom kontrolnog obrasca.

Kontrole

Kontrole kao što su tekstualna polja, potvrdni okviri su dijelovi koji se lako mogu dodati obrascu. Prijava su polja u koja korisnik može unijeti tekst. To je osnovni princip ulaska u boot kontejner, koristeći HTML5 atribut teksta. Tip najavljuje izgled ulaza. Punilo definira tekst koji će biti prikazan u polju za unos. Ti se tipovi mogu deklarirati dodavanjem na ulaz. Ako želite dodati e-poštu, promijenite je u type = "email". Treba imati na umu da morate omogućiti vrstu ulaza tako da je kontrola ispravno formatirana. Kontrola tekstualnog područja područje je koje vam omogućuje da koristite veliku količinu teksta, na primjer, za odjeljak komentara. Kada dodate tekstualno područje, možete prilagoditi veličinu deklariranjem koliko redaka želite snimiti. Budući da se Bootstrap kontejnera temelji na redovima i stupcima, tekstualno područje možete učiniti manjim ili većim povećanjem ili smanjivanjem broja redaka. Potvrdni okviri korisnicima omogućuju odabir nekoliko opcija. Prema zadanim postavkama, potvrdni okviri su prikazani okomito. Međutim, možete promijeniti okvir za potvrdu da biste prikazali vodoravno promjenom tipa type = "checkbox-inline".

Inline fontovi konfigurirani su drugačije od osnovnih. U ugrađenom elementu zastavice, klasa je dodijeljena = "checkbox-inline". Međutim, ako pogledate osnovni kontrolni kôd, možete vidjetida je class = "checkbox" deklariran u elementu, a ne u elementu.
Prekidač je sličan kvačici. Istovremeno se može odabrati samo jedan prekidač, dok same zastavice mogu imati nekoliko odabira. Kao i kod zastavica, vertikalni prekidači su prikazani prema zadanim postavkama, iako također možete promijeniti kod za prikaz i vodoravno.

Vrste opterećenja

Postoji više vrsta oblika: osnovni, ugrađeni i horizontalni. Svaka od njih se razlikuje na svoj način. Ugrađeni imaju komponente nazvane kontrolni elementi, vertikalno poravnati. Za horizontalne oblike kontrole se konfiguriraju vodoravno. Glavni oblik dolazi iz globalnog stila izgleda. Da biste stvorili osnovni obrazac, samo trebate stvoriti obrazac u HTML-u s elementom

, a zatim dodati oznake Bootstrap u oznake

. Druge dvije vrste obrazaca koriste ih kako bi ih razlikovale. Ako klasa nije specificirana, zadani obrazac odgovara osnovnom. Da biste napravili ugrađeni obrazac, morate dodati element class = "form-inline"

. Automatski će prilagoditi kontrole oblika vertikalno. Kao u istoj formi, horizontalni oblik dobiva se dodavanjem elementa class = "form-horizontal". Automatski će podesiti kontrole horizontalno.

Postavljanje redaka i stupaca

Redovi pokrivaju širinu podizača kontejnera. Imaju negativnu zalihu od 15 piksela na kraju, koju instalira njezin spremnik. To je zbog činjenice da svaki od njih ima vlastiti 15-pikselzaliha koja zamjenjuje oznaku kontejnera. Kolone poredane jedna pored druge imat će 15-struki rub, što dovodi do 30-pikselnog ruba između dva stupca.

Redovi imaju registraciju od -15 px, koja ukida dodavanje 15 px spremnika. Sadržaj u stupcu ovisit će o polju od 15 piksela stupca. Stupci imaju registraciju od 15 piksela. Stupci jedan do drugog imat će uvlačenje od 15 piksela, što će rezultirati u 30 px međuspremniku.

Zamijenite prefiks i broj stupca s dominantnom veličinom i brojem stupaca. Prefiksi određuju koji je uređaj dodijeljen stupcu Bootstrap 4 i visini spremnika. Na primjer, xs je dizajniran za male zaslone kao što su telefoni.

Prefiks

Za

xs

= 1200 px (bilježnice )

Kada je stupac naveden s prefiksom za manji uređaj, on će biti prikazan na sličan način na većim uređajima. Drugim riječima, stupac, koji se definira kao sm, funkcionirat će za uređaje veličine tableta ili više. Prednosti korištenja stupaca:

Izradite horizontalne dijelove iz okvira za prikaz.

Mogu imati različite širine.

Može varirati u širini na različitim širinama zaslona.

Mogućnost slaganja vodoravno s lijeva na desno, zatim vertikalno gore i dolje.

Može promijeniti položaj (raspored) braće i sestara u istoj liniji.

Imaju istu visinu kao i druga braća i sestre u jednoj liniji.

Može "rasti" ili "stisnuti" širinu.

Može automatski "omotati" ili"Ocijedite" okomito po potrebi ili na različitim širinama zaslona.

Može sadržavati više vrsta i redova. Raspored stupaca__.

Ažuriranje css strukture

Nakon mnogo godina čekanja, Bootstrap 4 je objavljen u siječnju 2018. godine. Bootstrap je bila prva raširena css struktura. Nova verzija programa temelji se na ovoj uspješnoj osnovi i ima mnoga poboljšanja koja olakšavaju korištenje mreža. Bootstrap 4 je OG odgovarajućih rasporeda. Nova konfiguracijska datoteka angular.json ima potpuno drugačiju strukturu od izvorne angular-cli.json.
Ako se korisnik namjerava usredotočiti na korištenje mreže za stvaranje fleksibilnih rasporeda u Angular aplikacijama, on samo treba koristiti bootstrap-grid i bootstrap-reboot pakete. Možete dodati datoteke kontejnerskog CSS Bootstrap izravno u svojstvo "styles" angular.json. Uvoz mreže u glavnu datoteku style.scss ima jednu važnu prednost prije uvoza u datoteku angular.json. Omogućuje vam izmjenu bilo koje varijable koju koristi definicija Bootstrap stila. U praksi, može biti korisno stvoriti datoteku styles-variables.scss pored styles.scss u mapi src s osjetljivim točkama prekida kao što je definirano u Bootstrapu prema zadanim postavkama. Korištenje styles-variables.scss omogućuje vam da poništite zadanu mrežu i implementirate vlastite prilagođene stilove. Stoga ga možete uvesti u prvi redak - styles.scss, koji će se koristiti s Bootstrapom, ali iu bilo koju drugu datoteku stila komponenti radi dosljedne implementacije selektivnog odgovora.

Upute za početnike za početnike

Bootstrap je vrlo korisna platforma sučelja zabrži i lakši razvoj weba. Korisnik neće morati brinuti o praktičnom iskustvu, jer ima moćno sučelje kada ga koristi. Vodič za pokretanje programa Bootstrap obuhvaća sljedeće postupke koji zahtijevaju:

Preuzimanje ili Omogućavanje pokretanja sustava.

Napišite osnovni HTML kod.

Omogući CSS za pokretanje sustava.

Omogući JQuery knjižnicu Omogući pokretanje JavaScripta.

Dodajte IE8 podršku za HTML5 i multimedijske upite.

Dodajte navigacijsku traku.

Dodajte sadržaj na stranicu spremnika.

Dodajte naslov.

Dodajte tablicu.

Dodajte obrazac unutar tablice.

Dodajte gumb za pokretanje s Glyphicon.

Dodajte prozor s dobrim pretraživanjem.

Demo konačnog koda uživo.

Online resursi. Sljedeći odjeljci postat će korak-po-korak vodič za prvi razvoj weba koristeći Bootstrap.

Preuzmite CDN i HTML5

Postoji nekoliko načina za korištenje Bootstrap na web stranici. Jedan od njih je korištenje CDN-a ili mreže za isporuku sadržaja. Korištenje bootstrap CDN-a znači da korisnik neće preuzeti i spremiti početne datoteke za pokretanje na poslužitelju ili na lokalnom računalu. Da biste to učinili, izradite novu datoteku index.html. Otvorite datoteku, unesite sljedeći kôd i spremite je. Ako korisnik želi koristiti svoju kopiju, napišite:

Morate se uvjeriti da je datoteka preuzeta. Zatim je smjestite u isti direktorij kao index.html na primjer u mapu "bootstrap-4". jQuery je potreban za funkciju javascript Bootstrap. Ako želite koristiti svoju kopiju jQuery:

Prije nego što se uvjerite da je jQuery učitan i smješten u isti direktorij kao index.html, na primjer, ime datoteke jQuery je "jquery-300.min.js". Tekućina za kontejnere je glavni element sa 100% širine vlastitog rasporeda, obavlja lateralna udubljenja za oblikovanje stupova. Tekućina Bootstrap kontejnera stvara punu širinu, poput tekućeg spremnika, na manjim uređajima.

javascript i IE8 podrška

Bootstrap funkcije, kao što je navigacijska traka, zahtijevaju javascript bootstrap datoteku. Da biste to učinili, stavite sljedeći kod iza koda prethodnog odjeljka:

Također trebate dodati podršku za IE8 za HTML5 i medijske upite. Bootstrap je baza koja je povezana s mobilnom tehnologijom i stoga odgovara na različite uređaje i veličine zaslona. Navigacijske ploče su vrlo cool. Korisnici neće tražiti podatke na web-lokaciji ako se spremnik Bootstrap ispravno koristi. Da biste to učinili, stavite sljedeći kôd u oznaku.

Dom

Sve

Demo

Kontakt

Oznaka DIV sadržavat će sadržaj web-lokacije. To je važno jer definira širinu stranice sa sadržajem. Neće se raspršiti ako posjetitelj koristi veliku veličinu zaslona. Da biste dodali spremnik sadržaja, postavite sljedeći kod u kôd prethodnog odjeljka.

Izrada zaglavlja tablice

Naslov je važan jer govori korisniku na kojoj se stranici nalazi. Postavite sljedeći kôd između oznaka "kontejner div" prethodnog odjeljka.

Uzorak stranice s obrascem

U ovom primjeru nalazi se tablica u kojojspremite elemente obrasca, kao što je tekstni okvir. Radna površina izgleda dobro, nema efekta vješanja i reagira na radnje korisnika. Da biste to učinili, stavite sljedeći kôd u prethodni odjeljak.

)

Adresa

Lista

)

Primjer ovog obrasca sadržavat će nekoliko tekstualnih polja, tekstualno područje i zamjenski tekst na popisu. Da biste to učinili, zamijenite kôd prethodnog odjeljka sljedećim.

)

Adresa

Lista

)

dodavanje GLYPHICON tipke

Glifikon je biblioteka jednobojnih ikona i simbola stvorenih s naglaskom na jednostavnost i prikladnu orijentaciju. Ikone gumba lijepo izgledaju, a biblioteka korisniku signalizira što je gumb namijenjen. Ikone i gumbi u boji mogu jednostavno označiti što čini gumb u web aplikaciji. Da biste to učinili, postavite sljedeći kôd između "posljednjih oznaka" prethodnog odjeljka.

Također možete dodati bilješke koristeći bootstrap stavljanjem sljedećeg koda prije otvaranja dev oznake u prethodnom odjeljku.

Glave gore!codeofaninja.com!

Ako korisnik učita kod, dobit će sljedeću poruku pored izvorne:

Item

Opis

Index-cdn.html

UpotrebaBootstrap struktura u CDN. Radit će ako je računalo na mreži.

Index-local.html

Koristi preuzetu strukturu bez CDN-a. Radi na lokalnom domaćinu. U Bootstrap 4, pozadinska slika veličine spremnika će raditi čak i ako je računalo isključeno.

Očito, Bootstrap nudi korisniku mnoštvo izvrsnih alata koji ubrzavaju razvoj softverskih aplikacija. To štedi mnogo sati, pa čak i dana u dizajnu i kodiranju čudnog korisničkog sučelja. Softverske komponente i dodaci su najosnovnije dokumentirani, ispunjeni primjerima uživo i blokovima koda za praktičnost korisnika. Bootstrap je vrlo pristojan alat za razvoj i dizajniranje mobilnih web stranica, koji vam omogućuje da dizajnirate svoju strukturu prvo, a kasnije - fontove, boju i stil. Vi samo morati provesti neko vrijeme učenje značajke metode i koristeći ga najbolje.