Сақтау

Bootstrap жауап беретін 12 бағанды торға салынған. Біз сондай-ақ осы жүйеге негізделген бекітілген және сұйық ені орналасуларын қостық.

Әдепкі 940px тор

Bootstrap бөлігі ретінде берілген әдепкі тор жүйесі ені 940 пиксель, 12 бағанды тор болып табылады .

Сондай-ақ оның әртүрлі құрылғылар мен ажыратымдылықтар үшін жауап беретін төрт нұсқасы бар: телефон, планшет портреті, кесте пейзажы және шағын жұмыс үстелдері және үлкен кең экранды жұмыс үстелдері.

<div класс = "жол" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Мұнда көрсетілгендей, негізгі орналасуды екі «бағанмен» жасауға болады, олардың әрқайсысы біздің тор жүйеміздің бөлігі ретінде анықтаған 12 негізгі бағандардың бірқатарын қамтиды.

Есеп айырысу бағандары

4 офсет 4

3 офсет 3

8 офсет 4

<div класс = "жол" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Кірістірілген бағандар

Bootstrap жүйесіндегі статикалық (сұйық емес) тор жүйесі арқылы ұя салу оңай. Мазмұнды кірістіру үшін бар бағанға жаңа .rowжәне бағандар жинағын қосыңыз ..span*.span*

Мысал

Бағанның 1-деңгейі

2-деңгей

<div класс = "жол" > 
  <div class = "span12" > 
    Бағанның 1-деңгейі
    <div класс = "жол" > 
      <div class = "span6" > 2-деңгей </div> 
      <div class = "span6" > 2-деңгей </div> 
    </div>
  </div>
</div>

Торды теңшеу

Айнымалы	Әдепкі мән	Сипаттама
`@gridColumns`	12	Бағандар саны
`@gridColumnWidth`	60px	Әрбір бағанның ені
`@gridGutterWidth`	20px	Бағандар арасындағы теріс бос орын
`@siteWidth`	Барлық бағандар мен арықтардың есептелген сомасы	`.container-fixed()`Миксиннің енін орнату үшін бағандар мен саңылаулар санын санайды

LESS ішіндегі айнымалылар

Bootstrap ішіне орнатылған әдепкі 940px тор жүйесін теңшеуге арналған бірнеше айнымалы мәндер жоғарыда құжатталған. Торға арналған барлық айнымалылар variables.less ішінде сақталады.

Қалай теңшеуге болады

Торды өзгерту үш @grid*айнымалы мәнді өзгертуді және Bootstrap қайта құрастыруды білдіреді. variables.less ішіндегі тор айнымалы мәндерін өзгертіңіз және қайта құрастыру үшін құжатталған төрт жолдың бірін пайдаланыңыз . Қосымша бағандарды қосып жатсаңыз, grid.less ішіндегілер үшін CSS қосуды ұмытпаңыз.

Жауапты болу

Торды теңшеу тек әдепкі деңгейде, яғни 940px торында жұмыс істейді. Bootstrap қолданбасының жауап беретін аспектілерін сақтау үшін responsive.less ішінде торларды теңшеу керек.

Fixed layout

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

<body>
  <div class="container">
    ...
  </div>
</body>

Fluid layout

<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

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

Supported devices

Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label	Layout width	Column width	Gutter width
Smartphones	480px and below	Fluid columns, no fixed widths
Portrait tablets	480px to 768px	Fluid columns, no fixed widths
Landscape tablets	768px to 940px	44px	20px
Default	940px and up	60px	20px
Large display	1210px and up	70px	30px

What they do

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

Modify the width of column in our grid
Stack elements instead of float wherever necessary
Resize headings and text to be more appropriate for devices

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

Use the compiled responsive version, bootstrap-responsive.css
Add @import "responsive.less" and recompile Bootstrap
Modify and recompile responsive.less as a separate

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // Landscape phones and down
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 940px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }