Iyo yakasarudzika grid system yakapihwa sechikamu cheBootstrap ndeye 940px-yakafara, 12-column grid .

Iyo ine zvakare ina inopindura misiyano yeakasiyana maturusi uye zvigadziriso: foni, piritsi mufananidzo, tafura landscape uye madiki desktops, uye yakakura widescreen desktops.

<div kirasi = "mutsara" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

Sezvinoratidzwa pano, hurongwa hwekutanga hunogona kugadzirwa ne "makoroni" maviri, imwe neimwe inotora nhamba yezvikamu gumi nembiri zvekutanga zvatakatsanangura sechikamu chegridi yedu.

Neiyo static (isina-fluid) grid system muBootstrap, nesting iri nyore. Kuti uise zvirimo zvako, ingo wedzera nyowani .rowuye seti .span*yemakoramu mukati meiyo iripo .span*column.

Muenzaniso

Mitsara yakagara inofanira kusanganisira seti yemakoramu anowedzera kusvika kunhamba yemakoramu emubereki wake. Semuenzaniso, makoramu maviri akaiswa madendere .span3anofanirwa kuiswa mukati me .span6.

<div kirasi = "mutsara" > 
  <div class = "span12" > 
    Chikamu 1 chechikamu
    <div kirasi = "mutsara" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </ div>
  </ div>
</ div>

Mazana, kwete mapikiseli

Iyo fluid grid system inoshandisa mapercents kuhupamhi hwekoramu panzvimbo yemapikisi akagadziriswa. Iyo ine zvakare yakafanana inopindura misiyano seyedu yakagadziriswa gidhi system, ichiva nechokwadi chezviyero zvakafanira zvekiyi skrini yekugadzirisa uye zvishandiso.

Fluid mitsetse

Ita chero mutsara unyoro nekungochinja .rowkuita .row-fluid. Makoramu anogara akafanana, zvichiita kuti zvive nyore kutenderera pakati pezvakagadziriswa uye zvinyoro zvimiro.

Markup

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

Nesting ine fluid grids yakati siyanei: iyo nhamba yemakoramu akaiswa madendere haidi kuenderana nemubereki. Pane kudaro, makoramu ako anogadzikiswa padanho rega rega nekuti mutsara wega wega unotora 100% yekoramu yevabereki.

<div class = "row-fluid" > 
  <div class = "span12" > 
    Chikamu 1 chechikamu
    <div class = "row-fluid" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </ div>
  </ div>
</ div>

Variables in LESS

Yakavakwa muBootstrap mashoma mashoma ekugadzirisa iyo default 940px grid system, yakanyorwa pamusoro. Zvose zvakasiyana-siyana zvegridi zvakachengetwa muzvinyorwa.zvishoma.

Maitiro ekugadzirisa

Kugadzirisa grid kunoreva kushandura matatu @grid*akasiyana uye kudzorera Bootstrap. Shandura mabhidhiri egidhi mumabhii.less uye shandisa imwe yenzira ina dzakanyorwa kuunganidza . Kana uri kuwedzera mamwe makoramu, iva nechokwadi chekuwedzera CSS kune avo vari grid.less.

Kuramba uchipindura

Kugadziriswa kwegridi kunongoshanda padanho rekutanga, iyo 940px grid. Kuti uchengetedze zvinoteerera zveBootstrap, iwe zvakare uchafanirwa kugadzirisa magidhi mukupindura.less.

Fixed layout

Iyo yakasarudzika uye yakapusa 940px-yakafara, yakatarisana dhizaini yeinongoita chero webhusaiti kana peji rinopihwa neamwechete <div class="container">.

<muviri>
  <div kirasi = "mudziyo" > 
    ...
  </ div>
</ body>

Fluid marongerwo

<div class="container-fluid">inopa inochinjika peji chimiro, min- uye max-upamhi, uye kuruboshwe-kuruboshwe. Yakanakira maapplication uye madoku.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sidebar content-->
    </ div>
    <div class = "span10" > 
      <!--Muviri zvemukati-->
    </ div>
  </ div>
</ div>

Zvishandiso zvinotsigirwa

Bootstrap inotsigira mashoma emibvunzo midhiya mufaira rimwe chete kubatsira kuita kuti mapurojekiti ako ave akakodzera pamidziyo yakasiyana uye skrini yekugadzirisa. Hezvino izvo zvinosanganisirwa:

Inoda meta tag

Kuti uone kuti zvishandiso zvinoratidzira mapeji anoteerera zvakanaka, sanganisira iyo yekutarisa meta tag.

<meta name = "viewport" content = "width=device-width, first-scale=1.0" >  

Zvavanoita

Mivhunzo yeMedia inobvumira tsika yeCSS zvichibva pane akati wandei mamiriro- retio, upamhi, mhando yekuratidzira, nezvimwe-asi kazhinji inotarisana nekutenderera min-widthuye max-width.

• Shandura hupamhi hwekoramu mune yedu grid
• Isa zvinhu panzvimbo pekuyangarara pese pazvinoda
• Regedza misoro uye zvinyorwa kuti zvinyatsoenderana nemidziyo

Bootstrap haingosanganisire iyi mibvunzo midhiya, asi kunzwisisa nekuwedzera kuri nyore kwazvo uye kunoda kushomeka kuseta. Iwe une mashoma sarudzo dzekusanganisira anopindura maficha eBootstrap:

1. Shandisa yakaunganidzwa inopindura shanduro, bootstrap-responsive.css
2. Wedzera @import "responsive.less" uye dzokorora Bootstrap
3. Shandura uye recompile responsive.less seimwe faira yakaparadzana

Wadii kungoisanganisira? Chokwadi kutaurirwa, hazvisi zvese zvinoda kupindurwa. Panzvimbo pekukurudzira vanogadzira kuti vabvise chimiro ichi, isu tinoona zviri nani kuti tigone kugonesa.

  // Mafoni epasi uye pasi
  @media ( max - width : 480px ) { ... }     
 
  // Landscape foni kune portrait piritsi
  @media ( max - width : 768px ) { ... }     
 
  // Portrait piritsi kune landscape uye desktop
  @media ( min - width : 768px ) uye ( max - width : 980px ) { ... }        
 
  // Desktop hombe
  @media ( min - width : 1200px ) { .. }