Bootstrap režģa sistēma pieļauj līdz 12 kolonnām visā lapā.
Ja nevēlaties izmantot visas 12 kolonnas atsevišķi, varat grupēt kolonnas kopā, lai izveidotu platākas kolonnas.
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Bootstrap režģa sistēma ir atsaucīga, un kolonnas tiks pārkārtotas, pamatojoties uz ekrāna izmēru: lielā ekrānā tas varētu izskatīties labāk, ja saturs ir sakārtots trīs kolonnās, bet mazā ekrānā būtu labāk, ja satura elementi tiktu sakrauti virs e. citi.
Padoms. Atcerieties, ka režģa kolonnām ir jābūt līdz divpadsmit rindām. Turklāt kolonnas tiks sakrautas neatkarīgi no skata porta.
Režģa klasesGrid Bootstrap sistēmai ir četras klases:
Iepriekš minētās klases var apvienot, lai izveidotu dinamiskākus un elastīgākus izkārtojumus.
Padoms. Katra klase tiek mērogota, tādēļ, ja vēlaties iestatīt vienādu platumu XS un SM, jums jānorāda tikai XS.
Režģa sistēmas noteikumiDaži Bootstrap režģa noteikumi:
Tālāk ir sniegta Bootstrap režģa pamatstruktūra:
...
Tādējādi, lai izveidotu izkārtojumu, jums ir jāizveido konteiners (). Pēc tam izveidojiet virkni (). Pēc tam pievienojiet tik daudz kolonnu, cik nepieciešams (tagus ar atbilstošām .col-*-* klasēm). Ņemiet vērā, ka skaitļiem .col-*-* katrā rindā vienmēr ir jāsaskaita līdz 12.
Režģa opcijasŠajā tabulā ir apkopots, kā Bootstrap Grid sistēma darbojas vairākās ierīcēs.
| klases prefikss | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| piemērots | Tālruņi | tabletes | Mazie portatīvie datori | Portatīvie datori un galddatori |
| Režģa uzvedība | Visu laiku horizontāli | Sakļauts, lai sāktu, horizontāli virs pārtraukuma punktiem | Sakļauts, lai sāktu, horizontāli virs pārtraukuma punktiem | |
| Konteinera platums | Nav (automātiski) | 750 pikseļi | 970 pikseļi | 1170 pikseļi |
| Kolonnu skaits | 12 | 12 | 12 | 12 |
| Kolonnas platums | Auto | ~62 pikseļi | ~81px | ~97 pikseļi |
| Notekas platums | 30 pikseļi (15 pikseļi katrā kolonnas pusē) | 30 pikseļi (15 pikseļi katrā kolonnas pusē) | 30 pikseļi (15 pikseļi katrā kolonnas pusē) | |
| Nestabils | Jā | Jā | Jā | Jā |
| kompensācijas | Jā | Jā | Jā | Jā |
| kolonnu secība | Jā | Jā | Jā | Jā |
Nākamajās nodaļās ir parādīti dažādu ierīču režģa sistēmu piemēri.
01.06.2016
Sveiki visiem!
Mēs turpinām apgūt "bootstrap 3" pamatus. Ir pienācis laiks "bootstrap 3" iepazīties ar tādu jēdzienu kā režģis.
Ar režģa palīdzību jūs varēsiet izveidot savu pirmo adaptīvo vietnes karkasu (tīmekļa lapu).
Tātad Bootstrap režģis sastāv no rindām un kolonnām.
Pirms kolonnu izveides ir jāuzraksta rindiņa. Lai to izdarītu, vienkārši ierakstiet div tagu ar klasi "rinda".
...būs kolonnas...
Tātad, vispirms tiek uzrakstīta rinda, un rindā jau ir izveidotas kolonnas.
1. Izveidojiet virkni:
...būs kolonnas... ...būs kolonnas...
2. Izveidojiet kolonnas (režģi):
Bootstrap režģis sastāv no 12 vienāda platuma kolonnām.
Ja nepieciešams, kolonnas var apvienot un novietot vēlamajā pozīcijā.
Lai izveidotu kolonnas, jums ir jāieraksta klase "rindā"
"kolonna-(*1)-(*2)".
Kur (*1) mēs norādām, kurām ierīču grupām jums ir jāizpilda ( skatīt 1. tabulu
).
Kur (*2 ) mēs norādām numuru (kolonnu skaitu)
(skatīt 2. tabulu
).
(cilne. 1) Bootstrap iezīmēšanas tabula dažādām ierīču grupām
Apskatīsim šo punktu ar piemēru.
Apskatot tabulu, mēs varam izveidot kolonnas (veidot režģi) dažādām ierīču grupām (mobilajiem tālruņiem, planšetdatoriem, personālajiem datoriem utt.).
Piemēram:
emuāra vietne
Tādā veidā mēs norādām, kurām ierīcēm mēs vēlamies izveidot skaļruņus.
Tagad izdomāsim, kas ir (*2). Tā kā es to jau minēju iepriekš, šis ir skaitlis, kas norāda kolonnu skaitu
(skatīt 2. tabulu
).
(cilne. 2) Bootstrap3 režģa izkārtojums
Tabulā var redzēt, ka Bootstrap režģis sastāv no 12 vienāda platuma kolonnām.
Lai norādītu 12 identiskas kolonnas visām ierīcēm, nevis ( * 2 ), ir jānorāda atbilstošs skaitlis. Bet atcerieties, ka kopsummai jābūt 12.
Apskatīsim piemēru:
emuāra vietnes Bootstrap iezīmēšanas tabula
Lai jūs saprastu manis teikto par to, ka kopējai summai jābūt vienādai ar 12, mēs veiksim aritmētisko aprēķinu.
Apskatiet 2. un 3. rindu.
○ col-lg-12 un col-lg-12 . (ekrāna izmērs ≥1200 pikseļi).
Rezultāts:
○ col-md-8 un col-md-4. (ekrāna izmērs ≥992 pikseļi).
Ekrānā būs divas kolonnas, jo 8 + 4 = 12 (tieši tikpat daudz, no kā sastāv režģis).
Kreisajā pusē tiks apvienotas 8 kolonnas, bet labajā pusē - 4.
Rezultāts:
○ col-sm-6 un col-sm-6 (ekrāna izmērs ≥768 pikseļi).
Ekrānā būs divas kolonnas, jo 6 + 6 = 12 (tieši tikpat daudz, no kā sastāv režģis).
Kreisajā pusē tiks apvienotas 6 kolonnas, bet labajā pusē - 6.
Rezultāts:
○ col-xs-12 un col-xs-12 (ekrāna izmērs: .col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, . col-xs-12 ( apmale: 1px solid #ccc; augstums: 60px; ) 1. bloks 2. bloks 3. bloks 4. bloks Izvēlnes saturs
Jūs varat redzēt rezultātu un vienlaikus pārbaudīt no tālruņa, planšetdatora vai datora, kā tiks atvērts izveidotais izkārtojums.
Sveiki, dārgie emuāra vietnes lasītāji. Raksta pirmajā daļā iepazināmies ar šī ietvara iespējām, uzzinājām, kas ir responsīvais dizains un kāpēc tas ir tik svarīgs mūsu laikmetā, kad dažādu mobilo sīkrīku popularitāte strauji pieaug. Tur mēs arī detalizēti izskatījām jautājumus par Bootstrap savienošanu ar HTML lapu (stila failu, skriptu un jQuery bibliotēkas savienošana).
Šodienas raksts ir par Bootstrap 3 izmantoto režģa sistēmu. Jūs uzzināsit, kādus režģa izmērus var izmantot, kā tie darbosies ierīcēs ar dažāda izmēra ekrāniem un kā pašiem izveidot rindas un šūnas, pamatojoties uz vienu vai vairākiem režģiem. Tas viss tiks skaidrots ar piemēriem, kas, ceru, uzlabos uztveri.
Kā režģa sistēma darbojas programmā Bootstrap 3Bootstrap 3 ir aprīkots ar 12 kolonnu režģa sistēmu, kas galvenokārt paredzēta mobilajām ierīcēm. Tie. tas ir paredzēts, pirmkārt, uz maziem displejiem, otrkārt - uz platajiem ekrāniem. Jaunajai šīs sistēmas versijai ir četri režģa izmēri. Visu šo informāciju var detalizēti izpētīt oficiālajā vietnē GetBootstrap.com, augšējā izvēlnē atverot cilni "CSS" un labajā izvēlnē atlasot vienumu "Režģa sistēma".
Tur jūs saņemsiet pilnu skaidrojumu par sistēmas darbību, saistītos multivides vaicājumus un tā tālāk. Html elementu rindai (piemēram, paziņojumi par rakstiem galvenajā lapā), kuru vēlaties novietot režģī, ir jāiekļauj konteiners (piemēram, tas ir jāiekļauj Div tagos) un jāpiešķir klase .row uz to (šajā gadījumā sākuma tags izskatīsies šādi) .
Jūs varat sadalīt elementus rindā vienā vai vairāku veidu režģos vienlaikus, iestatot klases atribūtu ar vērtību, piemēram, .col-xs-number (šajā gadījumā tiek izmantots tikai īpaši mazs režģis ).
Piemēram, ja vēlaties iegūt trīs vienāda izmēra kolonnas, jums ir jāsadala 12 (režģa izmērs programmā Bootstrap 3) ar 3 (nepieciešamais kolonnu skaits). Tas nozīmē, ka katram HTML elementam rindā (atkal tie var būt Div konteineri), jums būs jāreģistrē tās pašas klases - . Ja nepieciešamas nevienāda platuma kolonnas, tad vienkārši būs jāievēro nosacījums, saskaņā ar kuru skaitļiem aiz col-xs- visās trijās klasēs jāsaskaita 12 (piemēram, 2-4-6). Bet vispirms apskatīsim, kas šajā ierakstā ir “xs” un ko tas nozīmē?
Nedaudz zemāk apgabalā "Režģa opcijas" jūs atradīsiet skaidrojumu par četriem iepriekš minētajiem modernā Bootstrap režģa izmēriem.
Pēdējie trīs režģi būs horizontāli tikai tad, ja ekrāna izmērs ir lielāks par punktu, kurā notiek sabrukšana. Piemēram, lielam režģim uz ekrāniem, kas mazāki par 1200 pikseļiem, tas vairs nebūs horizontāls un kļūs vertikāls. Oficiālās vietnes GetBootstrap.com lapā, kuru mēs pašlaik pārskatām, ir piemēri un paskaidrojumi par to. Tomēr, manuprāt, viss ir nedaudz juceklīgs un sarežģīts.
Bootstrap 3 režģa sistēmas piemērs dažādiem ekrāna platumiemMēģināšu to visu izskaidrot ar gatavu piemēru. Jums būs jākopē tikai fails setka.html (lai to izdarītu, konteksta izvēlnē atlasiet vienumu "Saglabāt saiti kā ..."). Ja tieši atver šo failu pārlūkprogrammā (noklikšķinot uz dotās saites ar peles kreiso pogu), tad nekas nedarbosies, jo Bootstrap karkass nesavienosies.
Ievietojiet lejupielādēto setka.html failu mapē Bootstrap, par kuru mēs runājām . Tam jābūt tādā pašā līmenī kā failam index.html, ko izveidojām iepriekš.
Tagad atveriet šo setka.html failu jebkurā pārlūkprogrammā pēc savas izvēles un eksperimentējiet ar pārlūkprogrammas loga izmēru, lai redzētu Bootstrap 3 darbībā un saprastu, kā darbojas režģa sistēma. Kuras? Es tagad paskaidrošu.
Mana monitora ekrāna izšķirtspēja ir 1280 pikseļu plata, kas ir vairāk nekā lielajam režģim iestatītais 1200 pikseļu pārtraukuma punkts. Ko mēs redzam kā rezultātu? Kaut kas līdzīgs šim attēlam:
Šeit ir pieci vietņu izkārtojuma piemēri, kas veidoti uz dažāda veida režģiem:
Tādā veidā mēs varam redzēt un salīdzināt, kā šie režģi no Bootstrap 3 arsenāla darbojas kopā un kā tie darbojas atsevišķi (ja tiek izmantots tikai viens veids). Jo Tā kā iepriekšējā ekrānuzņēmuma uzņemšanas laikā mana pārlūkprogramma tika paplašināta līdz pilnekrāna līmenim (lielāks par 1200 pikseļiem), visi šie pieci vietnes izkārtojuma piemēri ir izvērsti horizontāli (kolonnas atrodas blakus viena otrai visā ekrāna platumā).
Tagad nedaudz sašaurināsim pārlūkprogrammas loga izmēru, lai mēs varētu redzēt sabrukumu.
Teksts virs augšējās rindas un klašu prefiksi tā šūnās ir mainījušies (šim nolūkam tika izmantotas redzamības klases, par kurām mēs runāsim vēlāk). Tagad tiek izmantots vidējais režģis un joprojām tiek rādīts horizontāli. Tajā pašā laikā apakšējā rinda (kas ilustrē tikai rupja režģa izmantošanu) ir salocīta vertikāli, t.i. blakus esošie bloki tagad tiek parādīti nevis blakus viens otram platumā, bet gan zem cita (augstumā).
Izrādās, ka liels režģis, ja nav nekādas ārējas ietekmes, darbojas šādi - tas ir salocīts vertikāli visās ierīcēs, kuru ekrāna izmērs ir mazāks par 1200 pikseļiem. Šajā gadījumā visi pārējie režģa piemērā izmantotie tiek parādīti horizontāli. Pirmajā rindā tiek izmantota režģu kombinācija, tāpēc tagad to kontrolē vidēja režģa sistēma (lielajai sistēmai vairs nav ietekmes).
Samazināsim pārlūkprogrammas loga izmēru vēlreiz platumā, lai tas kļūtu. Būs vēl viena avārija:
Tagad (pamatojoties uz ekrāna izmēru) mēs strādājam ar nelielu režģi. Attiecīgi ne tikai lielais, bet arī vidējais režģis ir attīstījies arī vertikāli. Nu, pirmajā rindā, kur tiek izmantota režģu kombinācija, tagad visu kontrolē Bootstrap mazā režģa sistēma. Tajā pašā laikā failā setka.html mainās arī kolonnu sadalījums šajā pirmajā rindā, kas nemaz nav nepieciešams, taču to ir pilnīgi iespējams izdarīt, lai apmierinātu dažas jūsu vajadzības pēc izkārtojuma (turklāt , ar “vienu vai diviem”, bez jebkādām problēmām).
Mēs turpinām samazināt pārlūkprogrammas loga platumu līdz vērtībām. Notiek vēl viena avārija:
Rezultātā ne tikai lielie un vidējie režģi iet vertikāli pāri lapai, bet tiem ir pievienojies arī mazais. Vienīgais palicis horizontālais režģis ir ļoti mazs režģis, kas tāds paliek (kā mēs tikko redzējām) visos apstākļos. Pat ja sašaurināt lapu līdz īpaši mazam platumam, īpaši mazais režģis nepārvērsīsies par vertikālu režģi (pat ja saturs neietilpst šūnās).
Šis piemērs (fails setka.html) ir izveidots precīzi. Par to, kā tur viss ir sakārtots, mēs sīkāk runāsim vēlāk. Taču pagaidām vēlos vērst jūsu uzmanību tikai uz dažām niansēm, kuras var pamanīt setka.html faila pirmkodā.
Mūsu piemēra pirmkoda skaidrojumiAugšpusē ar palīdzību tiek pievienoti izkārtojumu vizuālā noformējuma stili (atkāpes, režģa krāsas utt.), kas nenes īpašu semantisko slodzi. Ritinot uz leju avota kodu, jūs pamanīsit šo bloku:
lg Ekrāniem, kuru platums ir lielāks par 1200 pikseļiem, tiek izmantots rupjš režģis. md Izmanto vidējo režģi ekrāniem, kuru izmērs ir mazāks par 1200, bet lielāks par 992 pikseļiem. sm Izmanto nelielu režģi ekrāniem, kas mazāki par 992, bet lielāki par 768 pikseļiem. xs Izmanto īpaši mazu režģi ekrāna izmēriem, kas mazāki par 768 pikseļiem, kas vienmēr paliek horizontāli.
Ir četri konteineri, kuriem ir piešķirtas dažādas klases (lasiet par to). Tie ļauj parādīt noteiktu saturu, pamatojoties uz multivides vaicājumiem, kas atbilst dažādiem režģa izmēriem. Kā tas strādā? Visi četri nosaukumi tiek ielādēti pārlūkprogrammā (ja skatāties uz avota kodu), bet tiek parādīts tikai viens virsraksts atkarībā no pašreizējās ekrāna izšķirtspējas vai pārlūkprogrammas loga lieluma.
.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
Šis ir galvenais režģis, kurā ir apvienotas visas četras režģa sistēmas (to var redzēt pēc šūnu atribūtiem, piemēram, class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , kurā ir norādīta klase prefiksi visi četri režģi). Pati rinda, kā minēts iepriekš, tiek definēta, ievietojot visus tās elementus konteinerā ar class="row" (mūsu piemērā konteiners, kura pamatā ir div).
Lūdzu, ņemiet vērā, ka mūsu galvenais režģis sastāv no trim šūnām (kolonnām), un, ja saskaitīsiet visus skaitļus, kas ir piešķirti katrai kolonnai, piemēram, Bootstrap īpaši mazajiem režģa prefiksiem (col-xs), jūs iegūsit kopā 12. Tad tas pats attiecas uz skaitļiem pēc visu citu sistēmu prefiksiem. Tas ir saprotams, jo šim karkasam, kā minēts iepriekš, ir 12 kolonnu struktūra, t.i. horizontāli visa izkārtojumam pieejamā vieta ir sadalīta divpadsmit vienāda platuma kolonnās (vietnē neredzamas - tās ir kā šūnas skolas kladēs).
Nu, ar skaitļu palīdzību pēc klases prefiksiem jūs vienkārši iestatāt proporcijas katrai izkārtojuma šūnai (reālajai kolonnai). Tie. Proporcijas var būt, piemēram:
Kopumā vienā izkārtojumā (rindiņā) var izmantot vienu vai divas, trīs vai visas četras režģa sistēmas. Tas viss ir atkarīgs no jūsu dizaina vēlmēm un no tā, ko jūs mēģināt sasniegt ar savu tīmekļa lapu (kā tai vajadzētu izskatīties dažādos ekrāna izmēros). Oficiālajā vietnē ir sniegts piemērs:
Rindu (rindu) un šūnu izveide, izmantojot Bootstrap klases
Tagad labākai izpratnei izveidosim HTML lapu, kas nedaudz atgādina īstu tīmekļa lapu (ar galveni, teksta un grafisko saturu un kājeni), un izkārtosim to, izmantojot Bootstrap 3 režģa sistēmu.
Precīzāk, es pats izveidošu sagatavi, un es tikai ieteikšu jums pēc analoģijas ar iepriekšējo piemēru lejupielādēt failu sait.html (šim nolūkam konteksta izvēlnē atlasiet vienumu "Saglabāt kā ...") , lai vēlāk varētu pievienot vajadzīgās bootstrap klases. Tas arī būs jāievieto mapē Bootstrap tādā pašā līmenī kā fails index.html, ko izveidojām pirmajā rakstā (un fails setka.html, ar kuru strādājām tieši iepriekš).
Apskatot sait.html faila avota kodu, jūs redzēsit, ka Bootstrap un jquery tajā jau ir iekļauti, un saturs ir pievienots, lai atdarinātu vidējas tīmekļa lapas izskatu un darbību. Jā, jums būs nepieciešama arī mape ar šajā lapā izmantotajiem attēliem. Jūs varat to lejupielādēt no šejienes - img.zip. Vienkārši izsaiņojiet arhīvu un ievietojiet img mapi (pārliecinieties, ka tajā ir attēlu faili, nevis cita img mape) mapē Bootstrap, tajā pašā līmenī kā fails sait.html. Struktūra izskatīsies šādi:
Tagad (no mapes Bootstrap) pārlūkprogrammā jūs redzēsit tīmekļa lapu, kuru izmantoju kā piemēru. Pārsteidzoši, ka visi bloki lapā atrodas viens zem otra, un tas ļoti traucē pareizu informācijas vizuālo uztveri. Loģiski būtu tās izvietot kolonnās un tā, lai, ekrāna izmēram samazinoties, uz to reaģētu “dizains”, mainot kolonnu skaitu, lai atvieglotu apskati ierīcēs ar dažādu redzamā laukuma platumu.
Sait.html faila avota HTML kodā es mēdzu parādīt man paredzēto rindu (rindu) robežas, kurām mēs pielāgosim kolonnu parādīšanu, izmantojot kaut kādas Bootstrap režģa sistēmas. Ir tikai četras rindas (tās ir numurētas iepriekš redzamajā ekrānuzņēmumā) - galvene (galvene ar vietnes nosaukumu un logotipu), lapas nosaukums un apraksts, satura daļa (galvenais saturs, kas sastāv no četru rakstu paziņojumiem) un kājene.
Tagad failam sait.html būs jāpievieno Bootstrap marķējums, kas. Lai izveidotu rindas, kā atceraties, pietiks ar visu tā saturu ievietot konteinerā (visbiežāk tie ir Div tagi, lai gan var būt arī citi) un tajā ierakstīt klasi "row". Pirmajā rindā tas izskatīsies šādi:
tīmekļa vietne 
Tas pats jādara ar visām pārējām rindām (rindiņām) - ievietojiet sākuma tagu nākamās rindas sākumā un tagu tās beigās. Nerādīšu visu sait.html faila kodu ar veiktajām izmaiņām, jo tas ir pārāk apjomīgs.
Dažādu režģu izmantošana, lai izveidotu kolonnas ar saturu dažādos ekrāna platumosTagad sāksim veidot šūnas tajās rindās (rindās), kurās ir jēga to darīt. Diezgan loģiski būtu rakstu sludinājumus (no trešās rindas) izvietot četrās kolonnās un, kad ekrāna platums samazinās, šīs četras kolonnas pārvērst divās. Kā to izdarīt? Paskatīsimies.
Tātad programmā Bootstrap 3 ir 12 kolonnu režģis, par kuru mēs runājām iepriekš. Tā kā mēs nolēmām izveidot četras kolonnas ar paziņojumiem, būtu loģiski, ja tās būtu vienādas platumā, kas nozīmē, ka katra no kolonnām būs trīs šūnu (šūnu) platumā no mūsu neredzamās režģa sistēmas (neatkarīgi no tā, kuru režģi mēs izvēlamies - ultra - mazs, mazs, vidējs vai liels).
Kādu tīklu izvēlēties darbam? Ņemsim vidējo vērtību sākumā kā kompromisu. Šajā gadījumā visu četru šūnu konteineros jums būs jāpievieno klase "col-md-3" - . Es parādīšu vienas šūnas koda piemēru, lai nepārblīvētu rakstu:
Pēc veikto izmaiņu saglabāšanas redzēsiet, ka mūsu mājas lapa jau ir ieguvusi daudz lietojamāku izskatu:
Tiesa, kad pārlūkprogrammas logs tiek samazināts līdz mazāka pārtraukuma punkta platumam (mūsu izmantotā vidējā režģa gadījumā tas būs 992 pikseļi), visi paziņojumi atkal sarindosies kolonnā, kas nav labi, jo lietojamība šajā gadījumā samazinās (gandrīz 1000 pikseļu izšķirtspēja ļauj blīvāk sakārtot informāciju). Lai labotu šo situāciju, varat pievienot citu režģi no Bootstrap arsenāla tām pašām šūnām ar paziņojumiem. Kā to izdarīt? Paskatīsimies.
Izmantosim prefiksus "col-xs-6" klases nosaukumam katrā šūnā ar paziņojumu (rezultāts būs salikts class="col-md-3 col-sm-6"). Tas izskatīsies šādi (kā piemēru izmantojot vienu šūnu):
Paziņojuma teksts.
Kā redzat, šeit mēs pārkāpām nesen izsludināto noteikumu, ka skaitļiem aiz viena režģa prefiksiem visās šūnās jāsaņem 12. Saņēmām 24 (četras reizes sešas). Bet mēs to darījām ar nolūku, lai sasniegtu vēlamo rezultātu - četru kolonnu vietā mēs iegūstam divas kolonnas, šķērsojot vidējās Bootstrap režģa sistēmas pārtraukuma punktu (tas ir 992 pikseļi). Tie. šūnas atradīsies divās rindās, pa divām katrā:
Jo Ja izvēlējāmies īpaši mazu režģa sistēmu, tad, vēl vairāk samazinot pārlūkprogrammas loga platumu, bloku vertikālais izvietojums ar paziņojumiem zem cita (izvietošana vienā kolonnā) nenotiks, jo šī sistēma vienmēr paliek horizontāla.
Ja vēlaties, lai četras kolonnas pārvērstos divās kolonnās, kad ekrāna platums samazinās, un pēc tam vienā kolonnā, izmantojiet mazu režģa sistēmu, nevis "col-xs-6", izmantojot "col-sm-6" :
Pēc tam, kad pārlūkprogrammas loga platums ir samazināts zem 768 pikseļiem, jūs redzēsiet īsu paziņojumu, kurā divas kolonnas ar paziņojumiem tiek pārvērstas vienā. Vienkārši eksperimentējiet un sajūtiet atšķirību.
Web lapas galvenes pielāgošana, izmantojot Bootstrap 3Eksperimentēsim un mēģināsim vēlreiz, kurā būtībā ir divas potenciālās šūnas – vietnes nosaukums ar aprakstu, kā arī logotips. Patiesībā mēs tos pozicionēsim. Šoreiz izmantosim lielāku režģi ar "col-lg-6", lai izveidotu divas vienādas kolonnas.
tīmekļa vietne
Viss par vietņu, emuāru, forumu, tiešsaistes veikalu izveidi, to reklamēšanu meklētājprogrammās un naudas pelnīšanu vietnē
Tiesa, izmantojot lielu režģi, izgriešana notiek pie diezgan lielām ekrāna izšķirtspējām (mūsu gadījumā pārlūkprogrammas logi, jo tur simulējam ierīces ar dažādu ekrāna platumu). Pēc tam šūnas tiek salocītas vertikāli. Lai no tā izvairītos, pirmajai rindai pievienosim vēl vienu Bootstrap 3 režģi. Es domāju, ka maza režģa sistēma (klases prefikss col-sm) derēs. Tad kods izskatīsies apmēram šādi:
tīmekļa vietne
Viss par vietņu, emuāru, forumu, tiešsaistes veikalu izveidi, to reklamēšanu meklētājprogrammās un naudas pelnīšanu vietnē
Tomēr es nepadarīju vienādas šūnas ar vietnes nosaukumu un logotipu mazajam režģim, jo logotips būtībā ir šaurāks (šajā nozīmē šaurāks) no nosaukuma ar aprakstu. Ar mazāku ekrāna platumu nebūtu loģiski tiem piešķirt vienādas šūnas. Tāpēc es izveidoju pirmo kolonnu ar vietnes nosaukumu un aprakstu, kad Bootstrap mazā režģa sistēma ir aktivizēta divreiz lielāka par logotipa kolonnu.
Rezultātā, samazinot pārlūkprogrammas logu, šīs šūnas saplūdīs līdz pārrāvuma brīdim mazajai Bootstrap režģa sistēmai, kas notiek platumā, kas mazāks par 768 pikseļiem, un tad abas šūnas atradīsies viena zem otras.
Iespējams, esat pamanījis, ka teksts lapā ietriecas ekrāna kreisajā malā, kas izraisa . Varat pievienot, lai labotu šo situāciju body tagā, kas ļaus. Un jūs varat atrisināt visu ar standarta Bootstrap 3 rīkiem.
Lai to izdarītu, viss tīmekļa lapas saturs (viss, kas ir ietverts Body tagos) jāiesaiņo Div konteinerā ar tāda paša nosaukuma klasi - . Tie. ievietojiet šo tagu tūlīt aiz sākuma Body taga un aizveriet to pirms skriptu izsaukšanas, kas atrodas tieši pirms noslēdzošā Body taga. Pēc tam teksts vairs neatrodas pārlūkprogrammas logā.
Varat arī redzēt, ka priekšskatījuma attēli pārklājas viens ar otru, samazinoties ekrāna platumam. Fakts ir tāds, ka tie joprojām ir “nereaģē”, bet mēs tos padarīsim nākamajos šīs slejas rakstos. Un arī mēs turpināsim analizēt darbu ar Bootstrap 3 režģa sistēmu, iemācīsimies veidot pogas, tabulas, HTML formas, izveidot nolaižamās izvēlnes, navigāciju un daudz ko citu. Tāpēc nepārslēdzieties un sekojiet līdzi jaunām publikācijām.
Turpinājums >>> (Varat abonēt biļetenu, lai nepalaistu garām)
Un šeit ir turpinājums: (bet jūs joprojām abonējat - būs vēl daudz interesantu un noderīgu lietu).
Šajā rakstā mēs iepazīsimies ar Bootstrap 3 ietvara klasēm, kas paredzētas, lai izveidotu adaptīvu vietnes "skeletu" (izkārtojumu).
“Ēkas” režģa elementu sāknēšanas programma 3Bootstrap režģi veido "ēkas" elementi. Galvenie no tiem ir iesaiņojumi, rindas, adaptīvie bloki un atsaucīgās lietderības klases.
Būtībā režģis ir tikai iepriekš definētu klašu saraksts, ar kurām jūs varat iestatīt nepieciešamo bloku (HTML elementu) uzvedību un ar to palīdzību izveidot noteiktu adaptīvu vietnes izkārtojumu.
IetinējiAptinuma konteiners ir režģa "ēkas" elements, no kura atkarībā no izstrādes stratēģijas sākas visas lapas vai tās daļas (piemēram, galvenes, galvenās izvēlnes, galvenās zonas, kājenes) izkārtojums.
Bootstrap konteiners var būt adaptīvi fiksēts vai adaptīvs šķidrums.
Pirmajam (adaptīvi fiksētam konteineram) ir raksturīgs fakts, ka tam ir nemainīgs platums kādā skata loga platuma diapazonā (skata laukums).
Šajā tabulā ir parādīts, cik plats ir adaptīvi fiksēts konteiners noteiktā pārlūkprogrammas skata porta platumā.
= 768 pikseļi un = 992 pikseļi un ...  Veidojot vietnes izkārtojumu, viena Bootstrap iesaiņojuma konteinera ievietošana citā parasti netiek izmantota. Tātad pirmais Bootstrap režģa "ēkas" elements ir iesaiņojuma konteiners. Tas nosaka izkārtojuma platumu dažādos skata portos, kā arī centrē to (tikai adaptīvi fiksēts konteiners) attiecībā pret cilnes vai pārlūkprogrammas loga klienta apgabala kreiso un labo malu. Nākamais ēkas elements ir rinda (div bloks ar rindu klasi). Rinda ir īpašs bloks, ko izmanto tikai citu ēkas elementu (adaptīvo bloku) aptīšanai. Tās galvenais mērķis ir neitralizēt iesaiņojuma konteinera vai reaģējošā bloka pozitīvo polsterējumu (15 pikseļi pa kreisi un pa labi).  Atkāpju veidošanas piemērs: Konteiners (+15 pikseļi) -> rinda (-15 pikseļi) -> kolonna (+15 pikseļi) -> satura konteiners (+15 pikseļi) -> rinda (-15 pikseļi) -> kolonna (+15 pikseļi) -> rinda (-15 pikseļi) -> col (+15px) -> saturs *col ir atsaucīgs bloks Piemērā redzams, ka neatkarīgi no tā, kurā adaptīvajā blokā saturs atrodas, tam vienmēr būs pareizā piemale (t.i., 15 pikseļi pa kreisi un pa labi). Nākamais Bootstrap režģa "ēkas" elements ir atsaucīgs bloks (div ar klasi col-?-?).  Adaptīvie lodziņi ir Bootstrap režģa elementi, kuriem ir viena vai vairākas kolonnas-?-? . Šie bloki ir galvenie "ēkas" ķieģeļi, tie veido nepieciešamo struktūru. Adaptīvā bloka platums tiek iestatīts atkarībā no ierīces veida. Tas nozīmē, ka reaģējošajam blokam dažādās ierīcēs var būt atšķirīgs platums. Tieši tāpēc šo bloku sauc par adaptīvu. Kā tiek iestatīts reaģējošā bloka platums? Adaptīvā lodziņa platuma iestatījums, kam tai jābūt noteiktā ierīcē, pēc noklusējuma ir iestatīts uz skaitli no 1 līdz 12 (sāknēšanas kolonnu skaits). Šis numurs ir norādīts otrās rakstzīmes vietā? klasē kol-?-? . Šis skaitlis (noklusējums no 1 līdz 12) nosaka, kādai procentuālajai daļai no vecākelementa platuma jābūt atsaucīgajam blokam. Piemēram, skaitlis 1 iestata adaptīvā lodziņa platumu uz 8,3% (1/12) no vecāklodziņa platuma. Skaitlis 12 ir platums, kas vienāds ar 100% (12/12) no vecākbloka platuma.  Papildus adaptīvā bloka platuma norādīšanai ir jānorāda arī ierīces veids (nevis 1 jautājuma). Ierīces klase noteiks, kuram skata logam tiks piemērots šis platums. Bootstrap 3 izšķir 4 galvenās klases. Tie ir xs (skata loga platums > 0) , sm (skata loga platums >= 768 pikseļi), md (skata loga platums >= 992 pikseļi) un lg (pārlūka skata loga platums >= 1200 pikseļi). Piemēram, adaptīvajam blokam ar klasi col-xs-12 col-sm-6 col-md-4 col-lg-3 platums būs 100% (12/12) uz xs un 50% (6/12). ) uz sm , uz md - 33,3% (4/12), uz lg - 25% (3/12). Turklāt jums vajadzētu pievērst uzmanību tam, ka adaptīvie bloki neierobežo to diapazonu. Tie. ja adaptīvā bloka klases atribūtā norādāt xs, bet nenorādīsiet sm , tad tā iedarbība paplašināsies līdz šī diapazona darbības jomai. Piemēram, adaptīvajam blokam ar klasi col-xs-6 col-lg-3 platums būs 50% (6/12) xs , sm un md ierīcēm un 25% (3/12) lg . Adaptīvais bloks, tāpat kā konteiners, iestata pozitīvas piemales 15 pikseļus pa kreisi un pa labi saturam, kas tiks ievietots tajā. Pareizā Bootstrap režģa izkārtojumā adaptīvam blokam vienmēr ir jābūt rindai kā vecākam. Piemēram, sadalīsim bloku 3 vienādās kolonnās, kuras tiks parādītas vertikāli uz xs un horizontāli uz sm un augstāk: ... ... ... Piemēram, aprēķināsim pieejamo satura platumu pirmajam un otrajam blokam: 1 bloks... 2 bloki...
Atbildīgie bloki tiek ievietoti vecāka elementā vienu pēc otra rindās. Viena rinda satur adaptīvus blokus ar kopējo kolonnu skaitu, kas nepārsniedz 12 (pēc noklusējuma). Tie. bloki, kas neietilpst pirmajā rindā, tiek novietoti nākamajā rindā utt. Kā tiek sakārtoti adaptīvie bloki? Programmā Bootstrap 3 reaģējošie bloki ir peldoši (peld:pa kreisi). Tas ir jāņem vērā, veidojot tīmekļa lapas izkārtojumu. Pirms bloka, kuram jāsākas jaunā rindā, nepieciešams ievietot tukšu div elementu ar klasi clearfix . Tas ir jāpaslēpj arī ierīcēm, kurās šī darbība nav jāveic. Bloks ir paslēpts, izmantojot atbilstošās zemāk norādītās klases. Peldošajiem blokiem ir arī viena iezīme. Piemēram, ja iepriekš minētajā piemērā 1 bloka augstums būs lielāks par 2 blokiem. Tad 3. bloks neatradīsies uz jaunas līnijas, bet "pielips" 1. bloka labajā pusē.  Lai to novērstu, jums jāpievieno bloks ar clearfix klasi un jāpadara tas redzams nepieciešamajām ierīcēm (piemēram, md un lg): 1 bloks... 2 bloks... 3 bloks... Izkārtojuma veidošanas pamatprincipsIzkārtojuma izveides pamatprincips ir dažu adaptīvo bloku ievietošana citos. Tajā pašā laikā to platums vienmēr ir relatīvs parametrs, kas tiek iestatīts procentos (pēc kolonnu skaita) no vecākbloka platuma. Tie. jebkurā ligzdošanas līmenī, piemēram, 6 kolonnu atsaucīgs bloks vienmēr ir 50% (6/12*100%) no vecākelementa platuma. Piemēram, sadalīsim kādu bloku (galveno) 4 blokos (2 pirmajā rindā un 2 otrajā). Vienkāršības labad mēs izveidosim izkārtojumu, kas nav adaptīvs: 1 bloks... 2 bloks... 3 bloks... 4 bloks... Izveidosim 3 bloku izkārtojumu (3 x 2): 1 bloks... 2 bloki... 3-1 bloki... 3-2 bloki... 3-3 bloki... 3-4 bloki... 3-5 bloki... 3-6 bloki. .. 4 bloks... Ir viegli redzēt, ka ligzdotā adaptīvā bloka izkārtojums tiek veikts tāpat kā galvenais. Tas nozīmē, ka nav svarīgi, kāds ir bloka ligzdošanas līmenis, tā izkārtojums tiek veidots saskaņā ar tiem pašiem noteikumiem. Klases adaptīvajai bloku nobīdeiBootstrap ir adaptīvas klases (col-?-offset-?), ko varat izmantot, lai pārvietotu bloku par noteiktu kolonnu skaitu pa labi. Pirmais? jāaizstāj ar ierīces tipu (xs , sm , md vai lg). Otrais? kolonnu skaitam. Piemēram, iestatīsim bloku md ierīcēs uz 8 kolonnu platumu un novietosim to rindā centrā (t.i., pārvietosim par 2 kolonnām pa labi): 1 bloks... Papildus adaptīvās bloku nobīdes rīkiem Bootstrap 3 ir arī īpašas klases, kuras var izmantot, lai mainītu elementu secību vienā rindā. Bootstrap 3 atsaucīgās utilītu klasesBootstrap 3 satur adaptīvās (lietderības) klases, kas ļauj kontrolēt elementu displeja redzamību atkarībā no ierīces veida. Papildus tam, lai norādītu ierīci (xs , sm , md , lg), kurā bloks būs redzams, jums ir arī jānorāda, kā tas ir jāparāda šajā ierīcē. Iespējas ir iekļauts , bloks un iekļauts bloks .
Zīmes vietā? ir jānorāda bloks , inline , vai inline-block. Tie. norādiet, kā elements ir jāparāda. Piemēram, pievienojot elementam klases nähtava-md-bloku, tas tiks parādīts tikai ierīcēs, kurām ir skata logs md (platuma skata logs >=992px un .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, . col-md -10, .col-md-11, .col-md-12 ( apmale: 1px solid #ccc; margin-down: 30px; augstums: 60px; ) Sveika, pasaule! .col-md-1 .col -md- 1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md -1 .col-md-1 .col-md-1 .col-md-2 .col-md-10 .col-md-3 .col-md-9 .col-md-4 .col-md-8 .col-md-5 .col-md-7 .col-md-6 .col-md-6 .col-md-4 .col-md-4 .col-md-4 .col-md-12 Ja jūs joprojām neko nesaprotat, es mēģināšu to izskaidrot šādi. Tātad saturam klase "col-md-" izskatītos šādi: "col-md-8" saturs blokā saturs blokā Bootstrap ir iespēja rakstīt dažādus CSS stilus vai atšķirīgi sadalīt šūnas ierīču grupām. Piemēram, es vēlos, lai manas vietnes galvene lielos monitoros tiktu sadalīta vienā šūnā, bet tālruņiem es nolēmu izveidot divas šūnas un lietot tām citu CSS stilu. Vai sapratāt ideju? Bootstrap izkārtojuma tabula dažādām ierīču grupām
|
