Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Windows 10
  • COLn - određivanje stupca u redu. Skraćenice na engleskom

COLn - određivanje stupca u redu. Skraćenice na engleskom

Pozdrav, dragi čitaoci blog stranice. U prvom dijelu članka o upoznali smo se sa mogućnostima ovog okvira, naučili šta je responzivni dizajn i zašto je toliko važan u našoj eri bujnog rasta popularnosti raznih mobilnih gadžeta. Tamo smo takođe detaljno razmotrili probleme povezivanja Bootstrapa sa HTML stranicom (povezivanje stilskih datoteka, skripti i jQuery biblioteke).

Današnji članak je o grid sistemu koji se koristi u Bootstrapu 3. Naučit ćete koje veličine mreže se mogu primijeniti, kako će se ponašati na uređajima s različitim veličinama ekrana i kako sami kreirati redove i ćelije na osnovu jedne ili više mreža. Sve će to biti objašnjeno primjerima, koji će, nadam se, poboljšati percepciju.

Kako grid sistem radi u Bootstrapu 3

Bootstrap 3 dolazi u paketu Mrežni sistem sa dvanaest stubova, koji je prvenstveno dizajniran za mobilne uređaje. One. dizajniran je s pažnjom prije svega na male ekrane, na drugom mjestu - na široke ekrane. Nova verzija ovog okvira ima četiri veličine mreže. Sve ove informacije se mogu detaljno proučiti na službenoj web stranici GetBootstrap.com tako što ćete otići na karticu "CSS" iz gornjeg izbornika i odabrati stavku "Grid system" u desnom.

Tamo ćete dobiti potpuno objašnjenje kako sistem radi, povezane medijske upite i tako dalje. Red Html elemenata (na primjer, najave članaka na glavnoj stranici) koji želite pozicionirati u mrežu morat će biti okružen kontejnerom (na primjer, zatvoren u Div tagovima) i treba dodijeliti klasu .row na njega (u ovom slučaju, početna oznaka će izgledati kao

).

Pa, možete rasporediti elemente unutar reda na jednu ili više vrsta mreža odjednom postavljanjem atributa klase sa vrijednošću, na primjer, .col-xs-number (u ovom slučaju se koristi samo ekstra mala mreža ).

Na primjer, ako želite da dobijete tri kolone jednake veličine kao rezultat, onda morate podijeliti 12 (dimenzija mreže u Bootstrap 3) sa 3 (potreban broj kolona). To znači da ćete za svaki Html element unutar reda (opet, to mogu biti Div kontejneri), morati registrovati iste klase -

. Ako su potrebne kolone nejednake širine, onda će jednostavno biti potrebno poštovati uslov pod kojim brojevi nakon col-xs- u sve tri klase moraju biti zbirni do 12 (na primjer, 2-4-6). Ali prvo, pogledajmo šta je "xs" u ovom unosu i šta to znači?

Malo niže u oblasti "Opcije mreže" naći ćete objašnjenje gore navedenog četiri veličine oka moderni bootstrap.

  1. Prvo dolazi vrlo mala mreža (u koloni "Izuzetno mali uređaji") dizajnirana za mobilne uređaje sa veličinom ekrana manjom od 768 piksela širine (pročitajte vezu ispod). Uvijek će biti horizontalno na bilo kojoj veličini ekrana, a šta je to, pokušat ću objasniti u nastavku. Imajte na umu da će prefiks klase za ovaj tip mreže biti samo col-xs, kao u gornjem primjeru.
  2. Ako je veličina ekrana uređaja između 768 i 992 piksela (sada su to najčešće tableti), tada je Bootstrap mreža, dizajnirana za male uređaje, prikladna za njih. Zove se mali, a prefiksi klase se koriste da ga specificiraju. kol-sm.
  3. Za uređaje sa veličinom ekrana većom od 992, ali manjom od 1200 (uglavnom desktop ili laptop monitori), postoji mreža za srednje uređaje. Zove se srednji i ima prefiks klase col-md.
  4. Pa, za monitore širine veće od 1200 piksela postoji najveća mreža s prefiksom klase kol-lg.

Posljednje tri mreže će biti horizontalne samo ako je veličina ekrana veća od tačke u kojoj dolazi do kolapsa. Na primjer, za veliku mrežu na ekranima manjim od 1200 piksela, ona više neće biti horizontalna i postati okomita. Na stranici zvanične stranice GetBootstrap.com, koju trenutno pregledavamo, nalaze se primjeri i objašnjenja o tome. Međutim, po mom mišljenju, sve je pomalo zbrkano i komplikovano.

Primjer mreže Bootstrap 3 za različite širine ekrana

Pokušat ću sve ovo objasniti gotovim primjerom. Potrebno je samo da kopirate fajl setka.html(da biste to učinili, odaberite stavku "Sačuvaj putem veze kao ..." iz kontekstnog menija). Ako direktno otvorite ovu datoteku u pretraživaču (klikom na datu vezu lijevom tipkom miša), onda ništa neće raditi, jer se Bootstrap framework neće povezati.

Postavite preuzetu datoteku setka.html u fasciklu Bootstrap o kojoj smo govorili u . Trebao bi biti na istom nivou kao i datoteka index.html koju smo kreirali ranije.

Sada otvorite ovu datoteku setka.html u bilo kom pretraživaču po vašem izboru i eksperimentišite sa veličinom prozora vašeg pretraživača da vidite Bootstrap 3 u akciji i razumete kako funkcioniše sistem mreže. Koji? Sad ću objasniti.

Rezolucija ekrana mog monitora je široka 1280 piksela, što je više od granice od 1200 piksela postavljene za veliku mrežu. Šta vidimo kao rezultat? Nešto poput ove slike:

Evo pet primjera izgleda web stranice izgrađenih na različitim vrstama mreža:

  1. Prvi red je opisan korištenjem sva četiri grid sistema trenutno dostupna u Bootstrapu. Ovisno o rezoluciji ekrana uređaja na kojem se pregledava raspored, tamo će biti prikazan naziv mreže koja se koristi u svakoj od ćelija (sada je iznad prvog reda napisano da se koristi velika mreža, a u ćelijama "cl-lg" - prefiks klase velike mreže). Kako se širina ekrana smanjuje, ove oznake će se mijenjati.
  2. Ostali redovi ispod koriste samo jedan sistem veličine mreže - vrlo mali, mali, srednji i veliki (tim redoslijedom).

Na ovaj način možemo vidjeti i uporediti kako ove mreže iz arsenala Bootstrap 3 rade zajedno i kako rade odvojeno (kada se koristi samo jedan tip). Jer Pošto je moj pretraživač bio proširen na cijeli ekran (veći od 1200 piksela širine) kada sam napravio prethodni snimak ekrana, ovih pet primjera izgleda web stranice su svi horizontalno prošireni (kolone se nalaze jedna pored druge po širini ekrana).

Sada hajde da malo suzimo veličinu prozora pretraživača kako bismo mogli da vidimo kolaps.

Promijenjen je tekst iznad gornjeg reda i prefiksi klasa u njegovim ćelijama (za to su korištene klase vidljivosti, o čemu ćemo kasnije). Sada se koristi srednja mreža i još uvijek se prikazuje horizontalno. Istovremeno, donji red (koji ilustruje upotrebu samo gruba mreža) presavijeni okomito, tj. susjedni blokovi se sada ne prikazuju jedan pored drugog po širini, već jedan ispod drugog (po visini).

Ispostavilo se da se velika mreža u nedostatku bilo kakvog vanjskog utjecaja ponaša na ovaj način - presavija se okomito na svim uređajima čija je veličina ekrana manja od 1200 piksela širine. U ovom slučaju, svi ostali korišteni u primjeru mreže prikazani su vodoravno. Prvi red koristi kombinaciju mreža, tako da sada njime upravlja srednji sistem mreže (veliki sistem više nema efekta).

Smanjimo veličinu prozora pretraživača još jednom u širinu tako da postane. Doći će još jedan pad:

Sada (na osnovu veličine ekrana) radimo sa malom mrežom. Shodno tome, ne samo velika, već i srednja mreža se takođe razvija vertikalno. Pa, u prvom redu, gde se koristi kombinacija mreža, sve je sada kontrolisano Bootstrap-ovim sistemom malih mreža. Istovremeno, u datoteci setka.html mijenja se i distribucija kolona u ovom prvom redu, što uopće nije neophodno, ali je sasvim moguće to učiniti kako biste zadovoljili neke vaše potrebe u pogledu izgleda (štaviše , po "jedan ili dva", bez ikakvih problema).

Nastavljamo da smanjujemo širinu prozora pretraživača na vrijednosti. Dogodi se još jedan pad:

Kao rezultat toga, ne samo da velika i srednja mreža idu okomito preko stranice, već im se i mala pridružila. jedini vrlo mala mreža je ostala horizontalna, što ostaje tako (kao što smo upravo vidjeli) u svim okolnostima. Čak i ako suzite stranicu na ultra-malu širinu, ultra-mala mreža se neće pretvoriti u vertikalnu mrežu (čak i kada sadržaj ne stane u ćelije).

Ovaj primjer (datoteka setka.html) je napravljen tačno. O tome kako je tamo sve uređeno, kasnije ćemo detaljnije. Ali za sada želim da vam skrenem pažnju samo na neke nijanse koje možete uočiti u izvornom kodu datoteke setka.html.

Objašnjenja izvornog koda našeg primjera

Uz pomoć se na vrhu dodaju stilovi za vizualno oblikovanje izgleda (uvlake, boje mreže itd.), koji ne nose posebno semantičko opterećenje. Ako skrolujete prema dolje po izvornom kodu, primijetit ćete ovaj blok:

lg Gruba mreža se koristi za ekrane veće od 1200px širine.

md Koristi prosječnu mrežu za ekrane manje od 1200, ali veće od 992px.

sm Koristi malu mrežu za ekrane manje od 992, ali veće od 768px.

xs Koristi izuzetno malu mrežu za veličine ekrana manje od 768px, koja uvijek ostaje horizontalna.

Postoje četiri kontejnera za koje su dodijeljene različite klase (pročitajte o tome). Oni vam omogućavaju da prikažete određeni sadržaj zasnovan na medijskim upitima koji odgovaraju različitim veličinama mreže. Kako radi? Sva četiri naslova se učitavaju u pretraživač (ako pogledate izvorni kod), ali samo jedan naslov se prikazuje u zavisnosti od trenutne rezolucije ekrana ili veličine prozora pretraživača.

.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5
.col-lg-4 .col-md-5 .col-sm-1 .col-xs-6
.col-lg-4 .col-md-6 .col-sm-6 .col-xs-1

Ovo master grid, gdje su kombinovana sva četiri sistema mreže (to možete vidjeti po atributima ćelije kao što je class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , koji navodi prefikse klasa za sva četiri mreže). Sam red, kao što je gore spomenuto, definira se stavljanjem svih njegovih sastavnih elemenata u kontejner s class="row" (u našem primjeru, kontejner baziran na div).

Imajte na umu da se naša glavna mreža sastoji od tri ćelije (kolone) i ako zbrojite sve brojeve koji su dodijeljeni svakoj od kolona, ​​na primjer, za Bootstrapove ultra-male prefikse mreže (col-xs), dobit ćete ukupno 12. Tada će isto važiti i za brojeve iza prefiksa svih ostalih sistema. To je razumljivo, jer ovaj okvir, kao što je gore navedeno, ima strukturu od 12 kolona, ​​tj. horizontalno, sav raspoloživi prostor za raspored je podijeljen na dvanaest kolona jednake širine(ne vidi se na sajtu - one su kao ćelije u školskim sveskama).

Pa, uz pomoć brojeva iza prefiksa klase, jednostavno postavljate proporcije za svaku od ćelija (stvarnih kolona) vašeg izgleda. One. proporcije mogu biti, na primjer:


općenito, Mogu se koristiti jedan, dva, tri ili sva četiri mrežna sistema u jednom rasporedu (red). Sve zavisi od vaših preferencija dizajna i onoga što pokušavate da postignete sa vaše web stranice (kako bi trebalo da izgleda na različitim veličinama ekrana). Službena web stranica daje primjer:

Kreiranje redova (redova) i ćelija sa bootstrap klasama

Hajde da sada radi boljeg razumijevanja napravimo HTML stranicu koja pomalo podsjeća na prava web stranica(sa zaglavljem, tekstualnim i slikovnim sadržajem i podnožjem) i rasporedite ga koristeći Bootstrap 3 sistem mreže.

Tačnije, sam ću kreirati prazninu i samo ću vam predložiti, po analogiji s prethodnim primjerom, da preuzmete datoteku web stranica.html(da biste to učinili, izaberite stavku "Sačuvaj kao..." iz kontekstnog menija), tako da kasnije možete zajedno dodati potrebne bootstrap klase ovoj "ribi". Takođe će morati da se postavi u fasciklu Bootstrap na istom nivou kao i datoteka index.html koju smo kreirali u prvom članku (i datoteka setka.html sa kojom smo radili malo iznad).

Ako pogledate izvorni kod datoteke sait.html, vidjet ćete da su Bootstrap i jquery već uključeni u njega, a sadržaj je dodat da oponaša izgled i osjećaj prosječne web stranice. Da, trebat će vam i folder sa slikama koje se koriste na ovoj stranici. Možete ga preuzeti ovdje - img.zip. Jednostavno raspakirajte arhivu i postavite img folder (uvjerite se da sadrži slikovne datoteke, a ne neki drugi img folder) unutar Bootstrap foldera, na istom nivou kao i sait.html fajl. Struktura će izgledati ovako:

Sada, (iz foldera Bootstrap) u pretraživaču, vidjet ćete web stranicu koju sam koristio kao primjer. Zapanjujuće je da su svi blokovi na stranici smješteni jedan ispod drugog, a to uvelike ometa ispravnu vizualnu percepciju informacija. Bilo bi logično postaviti ih u kolone i tako da kada se veličina ekrana smanji, "dizajn reaguje" na to, mijenjajući broj kolona kako bi se olakšalo gledanje na uređajima s različitim širinama vidljivog područja.

U izvornom Html kodu datoteke sait.html, koristio sam da pokažem granice redova (linija) koje namjeravam, za koje ćemo prilagoditi prikaz kolona koristeći neku vrstu Bootstrap grid sistema. Postoje samo četiri reda (numerisani su na gornjoj snimci ekrana) - zaglavlje (zaglavlje sa imenom i logotipom sajta), naslov i opis stranice, deo sadržaja (glavni sadržaj koji se sastoji od najava četiri članka) i podnožje.

Sada ćemo morati dodati Bootstrap oznaku u sait.html datoteku, koja. Za kreiranje redova, kao što se sjećate, bit će dovoljno da sav njegov sadržaj priložite u kontejner (najčešće su to Div oznake, iako može biti i drugih) i u njega napisati klasu class="red". Za prvi red to će izgledati ovako:

site

Isto se mora učiniti za sve ostale redove (linije) - stavite početnu oznaku

na početku budućeg reda i oznake
— na njegovom kraju. Neću prikazati cijeli kod datoteke sait.html sa napravljenim promjenama, jer je previše obimna.

Korištenje različitih mreža za kreiranje stupaca sa sadržajem na različitim širinama ekrana

Hajdemo sada formirajmo ćelije u onim redovima (redovima) u kojima ima smisla to učiniti. Bilo bi sasvim logično da se najave članaka (iz trećeg reda) smjeste u četiri kolone, a kada se širina ekrana smanji, neka se ove četiri kolone pretvore u dvije. Kako uraditi? Hajde da pogledamo.

Dakle, u Bootstrapu 3 postoji mreža od 12 kolona, ​​o kojoj smo pričali gore. S obzirom da smo odlučili da napravimo četiri kolone sa najavama, logično bi bilo da budu jednake širine, što znači da će svaka kolona biti široka tri ćelije (ćelije) našeg nevidljivog grid sistema (bez obzira koju rešetku odaberemo - ultra -mala, mala, srednja ili velika).

Koju mrežu odabrati za posao? Uzmimo za početak prosjek, kao kompromis. U ovom slučaju, morat ćete dodati klasu “col-md-3” u kontejnere sve četiri ćelije -

. Pokazat ću vam primjer koda jedne ćelije, kako ne bih zatrpao članak:

Nakon što sačuvate napravljene promjene, vidjet ćete da je naša web stranica već dobila mnogo korisniji izgled:

Istina, kada se prozor pretraživača smanji na širinu manje tačke loma (u slučaju prosječne mreže koju koristimo, to će biti 992 piksela), sve najave će se ponovo nizati u kolonu, što nije dobro, jer upotrebljivost se u ovom slučaju smanjuje (rezolucija od skoro 1000 piksela omogućava gušće raspored informacija). Da biste popravili ovu situaciju, možete dodajte još jednu mrežu iz Bootstrapovog arsenala za iste ćelije za najavu. Kako uraditi? Hajde da pogledamo.

Koristimo prefikse "col-xs-6" za naziv klase u svakoj ćeliji sa najavom (rezultat će biti složena klasa class="col-md-3 col-sm-6"). To će izgledati ovako (koristeći jednu ćeliju kao primjer):

Google AdWords - kreiranje grupa

Tekst najave.

Kao što vidite, ovdje smo prekršili nedavno objavljeno pravilo da brojevi iza prefiksa jedne mreže u svim ćelijama treba da budu 12. Dobili smo 24 (četiri puta šest). Ali mi smo to uradili namerno da postignemo željeni rezultat - umesto četiri, dobijamo dve kolone prilikom prolaska tačke prekida za prosečni Bootstrap grid sistem (to je 992 piksela). One. ćelije će biti smještene u dva reda, po dvije u svakom:

Jer Budući da smo odabrali ultra-mali mrežni sistem, onda sa daljnjim smanjenjem širine prozora pretraživača, neće doći do vertikalnog rasporeda blokova sa najavama jedan ispod drugog (smještanje u jednu kolonu), jer ovaj sistem uvijek ostaje horizontalan .

Ako želite da se četiri kolone pretvore u dvije kolone kada se širina ekrana smanji, a zatim u jednu kolonu, trebali biste koristiti sistem male mreže umjesto "col-xs-6" koristeći "col-sm-6":

Yandex Direct - osnove kreiranja kampanje

Zatim, kada se širina prozora pretraživača smanji ispod 768 piksela, videćete belešku u kojoj su dve kolone sa najavama konvertovane u jednu. Samo eksperimentirajte i osjetite razliku.

Prilagođavanje zaglavlja web stranice koristeći Bootstrap 3

Hajde da eksperimentišemo i pokušamo ponovo, u kojoj su u suštini dve potencijalne ćelije - naziv sajta sa opisom, kao i logo. Zapravo, mi ćemo ih pozicionirati. Koristimo ovaj put veću mrežu sa "col-lg-6" da dobijete dve jednake kolone.

site

Sve o kreiranju web stranica, blogova, foruma, online trgovina, njihovoj promociji u tražilicama i zaradi na stranici

Istina, kada se koristi velika mreža, scrapping se događa pri prilično velikim rezolucijama ekrana (prozori pretraživača, u našem slučaju, jer tamo simuliramo uređaje s različitim širinama ekrana). Nakon toga, ćelije se presavijaju okomito. Da bismo ovo izbegli, mi dodajte još jednu Bootstrap 3 mrežu za prvi red. Mislim da će mali sistem mreže (prefiks klase col-sm) biti dovoljan. Tada će kod izgledati otprilike ovako:

site

Sve o kreiranju web stranica, blogova, foruma, online trgovina, njihovoj promociji u tražilicama i zaradi na stranici

Međutim, nisam napravio iste ćelije sa imenom sajta i logotipom za malu mrežu, jer je logo u suštini Uži (u smislu, uži) od naziva sa opisom. Sa manjom širinom ekrana, ne bi bilo logično dodijeliti im jednake ćelije. Zato sam napravio prvu kolonu sa nazivom i opisom sajta kada se aktivira Bootstrap small grid sistem duplo veći od kolone logoa.

Kao rezultat toga, kada se prozor pretraživača smanji, ove ćelije će se konvergirati do trenutka prekida za mali Bootstrap grid sistem, koji se javlja na širini manjoj od 768 piksela, a zatim će se obje ćelije nalaziti jedna ispod druge.

Možda ste primijetili da se tekst na stranici ruši na lijevu ivicu ekrana, što uzrokuje . Možete dodati da popravite ovu situaciju u body tag, što će omogućiti. I sve možete riješiti sa standardnim Bootstrap 3 alatima.

Da biste to učinili, morat ćete umotati cijeli sadržaj web stranice (sve što je sadržano u Body tagovima) u Div kontejner s istoimenom klasom -

. One. stavite ovu oznaku odmah nakon uvodne oznake Body i zatvorite je prije pozivanja skripti koje se nalaze neposredno prije završne Body oznake. Nakon toga, tekst se više neće oslanjati na prozor pretraživača.

Također možete vidjeti da se slike za pregled preklapaju kako se širina ekrana smanjuje. Činjenica je da još uvijek „ne reagiraju“, ali ćemo ih to učiniti u sljedećim člancima ovog odjeljka. Takođe ćemo nastaviti da analiziramo rad sa Bootstrap 3 grid sistemom, naučimo kako da dizajniramo dugmad, tabele, HTML forme, kreiramo padajuće menije, navigaciju i još mnogo toga. Stoga, nemojte se mijenjati i pratite nove publikacije.

Nastavak dalje >>> (Možete se pretplatiti na newsletter da ga ne biste propustili)

A evo i nastavka: (ali i dalje se pretplatite - bit će još mnogo zanimljivih i korisnih stvari).

Posljednje ažuriranje: 31.10.2015

Kada koristite Bootstrap, vrlo je zgodno pozicionirati interfejs kao tabelu ili mrežu koristeći redove i kolone. Dakle, ako pogledamo u pretraživaču standardni prikaz Index.cshtml, koji dolazi po defaultu, videćemo slično pozicioniranje: elementi ispod naslova su nekako raspoređeni u tri kolone i čine jedan red:

Ako otvorimo kod za prikaz, možemo vidjeti upotrebu bootstrap klasa:

Počinjemo

.............

Nabavite više biblioteka

.............

web hosting

.............

Klasa reda specificira raspored pojedinačnih blokova kao jedan red. Red u Bootstrapu može imati do 12 stupaca. Redova može biti koliko god želite, ali u ovom slučaju imamo jednu liniju.

Klasa col-md-4 se koristi za kreiranje kolone u jednom redu. col, kao što ime govori, označava kolonu.

Slijedi md - identifikator uređaja. Kao što smo vidjeli u prethodnoj temi, bootstrap uslovno dijeli sve uređaje u četiri grupe ovisno o širini ekrana. md posebno korelira sa srednjim uređajima (odnosno onima koji su široki 992 piksela i više). A broj 4 označava koliko će konvencionalnih jedinica u liniji ovaj blok zauzeti. Dakle, ispada da klasa col-md-4 znači da će ovaj blok zauzimati 4 konvencionalne jedinice od 12 po redu, odnosno trećinu širine ekrana uređaja sa širinom ekrana od 992 piksela ili više.

A pošto imamo četiri grupe, svaka grupa ima svoje razrede. Na primjer, za vrlo male uređaje sa ekranom manjim od 768 piksela (tj. mobilni telefoni), slična klasa može biti col-xs-4 .

Sve vrste časova:

    col-xs-* : za uređaje sa širinom ekrana manjom od 768px

    col-sm-* : za uređaje sa širinom ekrana od 768 piksela ili više

    col-md-* : za uređaje sa širinom ekrana od 992 piksela ili više

    col-lg-* : za uređaje sa širinom ekrana od 1200 piksela ili više

Dok će blok klase col-md-4 izgledati prilično lijepo čak i na mobilnim uređajima, možemo postaviti dvije klase odjednom za dodatno fino podešavanje prikaza na različitim uređajima, na primjer:

I dok u podrazumevanom prikazu Index.cshtml, sva tri polja imaju relativnu širinu od 4 jedinice, za ukupno 12 jedinica, možemo postaviti bilo koju drugu širinu, pozicionirajući ih kako nam odgovara. Na primjer:

Udubljenje

Posebne klase col-md(sm|lg)-offset-* omogućavaju vam da postavite pomak u odnosu na lijevi blok ili početak reda u konvencionalnim jedinicama. Na primjer, imamo ovu liniju:

Lijevi blok

................

desni blok

................

Col-md-offset-4 klasa će pomaknuti desni blok 4 proizvoljne jedinice udesno:

Neki primjeri korištenja ofseta:

Redoslijed kolone

Uz pomoć klasa col-md(sm|lg)-push-* i col-md(sm|lg)-pull-*, možemo redefinirati redoslijed blokova u liniji. Na primjer, klasa col-md-push-4 gura blok četiri jedinice desno od njegove trenutne pozicije. Suprotno tome, klasa col-md-pull-4 pomiče blok lijevo od trenutne pozicije. Dakle, mogli bismo prepisati prethodni primjer sa pomakom na sljedeći način:

Lijevi blok

................

desni blok

................

I mi bismo imali isti efekat. Ali također možemo potpuno promijeniti redoslijed blokova:

Lijevi blok

................

desni blok

................

Sada će se desni blok pomaknuti ulijevo za četiri jedinice, a lijevi blok udesno za 8 jedinica:

Tako, koristeći klase reda i stupaca, možemo postaviti opći raspored elemenata, a prilagodljivost bootstrapa osigurava da će takva mreža elemenata izgledati sasvim normalno na bilo kojem uređaju. Pogledajmo sada neke od komponenti koje nam Bootstrap nudi.

Urati su soli natrijuma, kalcijuma, kalijuma i magnezijuma mokraćne kiseline. Sa njihovim viškom sadržaja nastaju kristali soli koji se talože. Pojava urata često je povezana s prehranom. Prisustvo soli u urinu, po pravilu, nema ozbiljnu dijagnostičku vrijednost, jer normalno ima blago kiselu reakciju.

Međutim, svaki produženi pomak u reakciji urina na kiselu stranu je nepoželjan faktor. Urati u velikim količinama mogu dovesti do pojave kamenaca u bešici, mokraćnim putevima i bubrezima. Takav pomak moguć je kod prekomjernog unosa proteina, gladovanja, dugotrajnog fizičkog napora, dijabetesa i groznice.

Faktori koji doprinose pojavi patologije

Glavni razlog povećanja mokraćne kiseline (urata) je pothranjenost: neravnoteža, monotonija, nepravilnost, pretjeranost.

Ostali faktori koji doprinose razvoju bolesti uključuju:

  • sistematska stresna opterećenja na tijelu;
  • nasljedna predispozicija;
  • infektivne patologije genitourinarnog sistema;
  • pijelonefritis, hepatitis, pankreatitis, tromboza bubrežnih arterija, prolaps bubrega, hidronefroza i leukemija;
  • giht je kršenje metaboličkih procesa, zbog čega se urati djelomično izlučuju bubrezima, a njihova velika masa se nakuplja u tkivima i krvi, što dovodi do akutnog, rekurentnog artritisa (upale zglobova);
  • uzimanje lijekova: antibiotika, antipiretika, anestetika (lijekova protiv bolova).

Namirnice koje uzrokuju povećanje nivoa urata u tijelu:

  1. Sadrži salicilnu kiselinu: čaj od lipe, maline, viburnuma.
  2. Doprinose taloženju proteinske troske: crveno meso mladih životinja (svinjetina, teletina), konzerve sa dugim rokom trajanja, kobasice, iznutrice (srce, jetra, bubrezi, želuci), bogate mesne i riblje čorbe.
  3. Dimljeni proizvodi.
  4. Povrće: paradajz, mahunarke, luk, spanać, kupus, kiseljak.
  5. Začini, začini.

Simptomi u prisustvu urata u urinu

Povećan sadržaj urata može se primijetiti u apsolutno bilo kojoj dobi (kod odraslih, djece, starijih osoba). Bolest je češća kod muškaraca nego kod žena. Kod trudnica je to uobičajena pojava, a prekoračenje nivoa uratnih soli smatra se normom. Međutim, njihov broj treba stalno pratiti kako bi se spriječilo prekomjerno nakupljanje.

U početnoj fazi bolest je asimptomatska. To znači da je prisustvo urata moguće utvrditi samo kada se prođe opći test urina. Prvi znakovi bolesti pojavljuju se kada postoje kamenci u bubrezima ili bubrežnoj zdjelici, koji nastaju kao posljedica kršenja svojstava urina. Ove specifične formacije (amorfni ostaci urina, soli) služe kao jezgro za uratni kamen. Vremenom se povećavaju u veličini i kreću se od bubrega kroz mokraćovode do mjehura.

U pozadini stvaranja kamenja, intenzivno se razvija zarazni upalni proces. Ovo je popraćeno uobičajenim simptomima:

  • visoka tjelesna temperatura;
  • blagi porast krvnog pritiska;
  • slabost;
  • mučnina, ponekad i povraćanje.

U akutnom periodu pacijent osjeća bol u lumbalnoj regiji ili u trbušnoj šupljini. Javlja se bolno mokrenje sa čestim nagonima. Kod djece, povećani nivoi urata u mokraći dovodi do zatvora, povraćanja,
posebno u jutarnjim satima, napadi astme nepoznate etiologije.

Takva djeca su hiperaktivna i često prestižu svoje vršnjake u svom fizičkom razvoju. Urati se akumuliraju u velikim količinama ispod kože djeteta. To dovodi do pojave crvenih mrlja na tijelu.

Amorfni urati izdvajaju se kao posebna grupa. Oni daju urinu smeđe-ružičastu nijansu. Njihov fiziološki sadržaj u urinu je jednostruk. Velika količina amorfnih urata ukazuje na bolesti kao što su:

  • glomerulonefritis;
  • kongestivni bubreg;
  • hronično zatajenje bubrega.

Metode istraživanja

Prema rezultatima laboratorijskih pretraga urina i krvi, gotovo uvijek se otkriva blagi porast proteina, leukocita, bakterija (s pijelonefritisom).

  1. Najjednostavniji i najpristupačniji metod za otkrivanje urata je klinička analiza urina. Prvi znak prisustva kristala je sediment u urinu bogate žute ili crveno-smeđe boje. pH nivo > 7,0 (normalan pH 5,0-7,0; prosek 6,25). Analiza urina pokazuje prisustvo soli kalcijuma, kalijuma, natrijuma, magnezijuma.
  2. Kliničkim testom krvi utvrđuje se dekompenzacija funkcije bubrega, aktivacija pijelonefritisa, otkriva se anemija.
  3. Ultrazvuk i rendgenski snimak ─ dijagnosticiraju uratni pijesak i kamenje.
  4. Ekskretorna urografija ─ omogućava vam da vidite funkcionalne i anatomske promjene u bubrezima.
  5. CT (kompjuterska tomografija) je metoda koja daje najtačnije informacije o veličini kamenaca, od malih do velikih. Ako se, prema rezultatima studija, urati nalaze u velikim količinama, to znači da su se promijenila biohemijska svojstva urina. Takvi poremećaji uz pravilno organiziranu terapiju mogu se lako ispraviti.

Glavni pravci liječenja

Liječenje bolesti treba biti kompleksno, utječući na uzrok (etiotropna terapija) i mehanizme stvaranja uratnih kamenaca (patogenetska terapija).

Liječenje lijekovima se koristi kada su uratni kamenci već formirani:

  1. Prepisati lijekove koji neutraliziraju soli i čine urin alkalnijim (Blemarin).
  2. Za uklanjanje urata uzimaju lijekove koji sadrže kalij i magnezij (Panangin, Asparkam).
  3. Kao blag diuretik, preporučuje se uzimanje biljnog izvarka iznutra (bubrežna kolekcija).
  4. Vitamini A, E, B6.

Za uklanjanje uratnih kamenaca koriste se konzervativne, kirurške i instrumentalne metode liječenja. Program konzervativne terapije odabire se pojedinačno za svakog pacijenta, uzimajući u obzir mehanizme i uzroke nastanka kamenca. Liječenje lijekovima ima za cilj promjenu biohemijskog sastava krvi i urina, a također doprinosi uklanjanju kristala urata veličine do 5 mm. Terapija na daljinu ─ drobljenje kamenja ultrazvukom ili korištenjem kontaktne laserske litotripsije.

Kirurško liječenje je propisano prilično široko. Indikacije za operaciju:

  • teški napadi bubrežne kolike, do invaliditeta;
  • opstrukcija odljeva urina, što dovodi do deformacije bubrega;
  • opstruktivna anurija;
  • uporna hematurija (krv u urinu);
  • česti napadi akutnog pijelonefritisa;
  • kamen u usamljenom bubregu ili ureteru i ne može proći sam.

Prognoza za oporavak nakon operacije abdomena je uvijek povoljna.

Dijeta kao osnova liječenja

Da bih smanjio nivo soli, prepisujem dijetoterapiju. Dijeta za urate u urinu, prema preporukama ljekara, je specifična. Intenzivno uklanjanje urata kroz bubrege olakšavaju proizvodi kao što su:

  • agrumi (narandže, limuni, mandarine);
  • grejp;
  • šumske jabuke;
  • smokve, grožđice, ogrozd, crna ribizla;
  • bundeva, patlidžan, krastavci;
  • morske alge;
  • podsireno mleko.

Ne možete jesti meso u velikim količinama. Da biste se riješili toksina sadržanih u sirovom mesu, potrebno je pridržavati se posebne tehnologije kuhanja. Kada skuvate cijeli komad mesa, odmah ga stavite u kipuću vodu. Za pripremu roštilja meso je prethodno namočeno u otopini kuhinjske soli 3-4 sata.

Prilikom pripreme mesne juhe, prva mast se mora izliti. U drugu mast je bolje staviti crni luk, on će upiti proteinske šljake koje su ostale u mesu. Bacite luk nakon kuvanja.

Urati u mokraći rezultat su pothranjenosti, prekomjerne konzumacije životinjskih proteina i nedostatka povrća i vlakana u ishrani. To znači da pravovremeno prilagođena prehrana pomaže u izbjegavanju ozbiljnih komplikacija u budućnosti.

Engleski jezik je prepun toliko skraćenica da se sastavljaju čitavi rječnici kako bi se razumjelo ono što je rečeno i napisano. Skraćenice se mogu klasificirati na različite načine:

  • prema području primjene
  • tip
  • putem vizualizacije
  • sličnost u zvuku.

Većina skraćenica je napravljena kao skraćenica. Skraćenica može biti početna, odnosno za skraćenicu se koriste početna slova sastavnih riječi. Druga vrsta skraćenica naziva se alfa-zvuk. Postoje i mješoviti tipovi. Nalaze se i na engleskom jeziku.

SMS skraćenice

Upečatljiv primjer takve skraćenice su specifične kombinacije za pisanje SMS-a. Izmišljen je cijeli jezik od stotina riječi, razumljivih, međutim, i pošiljaocu i primaocu. Pretpostavimo da primite poruku od pretplatnika koji govori engleski: ADIDAU BILY, ovo nije mrežna greška, ovo je priznanje: “Cijeli dan sanjam o tebi jer te volim”.

Još nekoliko:

Skraćenice se ne koriste samo u porukama koje se prenose putem modernih naprava, već iu prilično tradicionalnoj prepisci.

Skraćenice u prepisci

U poslovnoj korespondenciji se koriste mnoge skraćenice, od naziva radnih mjesta: CA - ovlašteni računovođa, CEO (glavni izvršni direktor) - viši službenik do specifičnih pojmova: kol. (sakupljanje) - prikupljanje, prikupljanje; b/l (tovarni list)

Prilikom popunjavanja adresne ćelije na koverti, ljudi ne pišu punu ulicu, već je zamjenjuju skraćenicom St - ulica.

A u samom pismu, primalac, videći kombinacije slova “pls”, “ppl”, “Q.” lako čitati: molim (molim), ljudi (ljudi), pitanje (pitanje).

Skraćenice dimenzija

Kao i na ruskom, na engleskom često pribjegavaju skraćenicama u pisanju različitih mjerenja. Cijev se označava kao bbl, stopa (foot) - ft, unca (unča) - oz, quart - qt.

Na engleskom, neki skraćenice povezane sa vremenom, pišu se kao akronim, na primjer, nazivi mjeseci: Apr. , avg./ Avg., dec. Izgovaraju se u punom obliku: april, avgust, decembar.

Drugi, recimo, ukazuju na doba dana: ujutro, poslijepodne. - slovima, odnosno kako su napisana.

Skraćenice simbola su veoma česte. Mnogi od njih su međunarodne prirode.

Broj je označen znakom #, "i" - &, dolar je napisan kao $, funta sterlinga i euro odgovaraju znakovima £ i €. Simbol autorskih prava - ©.

Geografske, fonetske, vizuelne skraćenice

Skraćenice naziva mjesta, kao što su države, provincije, pa čak i pojedinačni gradovi na engleskom jeziku, daleko su od neuobičajenog. Primjer je skraćenica za naziv District of Columbia (District of Columbia) DC ili grada Washingtona, WA.

Zanimljiva vrsta skraćenica - fonetske i vizuelne. Prvi se zasnivaju na sazvučju određenih riječi i brojeva. 10Q je kao Hvala (hvala), 2ez je kao Prelako (prelako). F2F - licem u lice (licem u lice) i pismeno zamijeniti ove izraze.

kolokvijalne skraćenice

Skraćenice najčešće korištenih izraza gotovo su ušle u književnu normu. Ne samo da se mogu čuti u kolokvijalnom govoru, već se mogu naći i u djelima pisaca ili u riječima pjesama. Njihova jedinstvena karakteristika je da se izraz koji se sastoji od nekoliko riječi ne samo izgovara zajedno, već i piše jednom riječju. Riječi koje čine frazu. Ja sam skraćujem na ja, moram da imam, hoću na hoću.

Postoje još kraće opcije: imao sam ili bih govorio i pisao kako bih, ti si imao ili bi htio da bi, a on je ili ima kao što je.

Ti ces Ti ćeš
Ti imaš Jeste
Ti si Ti si
ne bi Ne bih
neću Neću
Nisu bili nisu
Mi ćemo Mi ćemo
Imamo Jesmo
Imali smo/mi bismo Mi bismo
Mi smo Mi smo
nije Nije
Oni ce Oni će
Oni imaju Oni su
Imali su / bi Oni bi
Oni su Jesu
Bit će Bit će
Postoji / ima Eto
Imalo/bilo bi Crveno
ne treba Ne bi trebalo
Ona će Ona će
Ona jeste/ima Ona je
Imala bi Ona bi
Neće Ne mogu
Ne bi trebalo Ne bi trebao
Ne treba Ne treba
Ne mora Ne smije
Možda ne Ne bi
Jeste / ima To je
Nije Nije
hoću Ja ću
imam ja sam
On će On će
Imao bi On bi
Nemam Nisam
Nije Nije
Nisam imao Nisam
Nije ne
Nemoj Nemoj
Ne usudi se Ne usuđujem se
nije mogao Ne mogu
Nisu nisu

Neki žargonski izrazi stekli novi zvuk i napisani su zajedno.

Top Related Articles